Change function animation duration? - CSS-Tricks

This topic is empty.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts
December 18, 2013 at 1:55 pm #158639
Rugg
Participant
Consider the following code…
```
$.fn.extend({

    funkOne: function() {

        $(this).animate({ scrollTop: 0 }, 600);   
    },

    funkTwo: function() {

        $('div').funkOne();
    },

    funkThree: function() {

        $('p').funkOne();
    }

});
```
How can I have different animation durations inside funkTwo and funkThree? Something similar to the following is how I imagine it…unfortunately it doesn’t work.
```
$.fn.extend({

    funkOne: function() {

        $(this).animate({ scrollTop: 0 }, 600);   
    },

    funkTwo: function() {

        $('div').funkOne(300);
    },

    funkThree: function() {

        $('p').funkOne(900);
    }

});
```
Any suggestions on how to solve this? Any help is welcome, Thanks!
December 18, 2013 at 2:14 pm #158642
TheDoc
Member
Wouldn’t it be like this:
```
$.fn.extend({

    funkOne: function(duration) {

            var speed = (duration ? duration : 600);

        $(this).animate({ scrollTop: 0 }, speed);   
    },

    funkTwo: function() {

        $('div').funkOne(300);
    },

    funkThree: function() {

        $('p').funkOne(900);
    }

});
```
It’s saying that speed is the duration value that gets passed through, but if that doesn’t exist let’s just use 600.
December 18, 2013 at 2:31 pm #158645
Rugg
Participant
@TheDoc

Thanks for the suggestion…seems like a nice and simple solution. I’ll give it a try in a short time and see how it works.

One thing —

I’m a bit confused about the variable syntax…specifically duration ? duration : 600. You mentioned below: it’s saying that speed is the duration value that gets passed through, but if that doesn’t exist let’s just use 600. I don’t quite understand how the question mark works though.

One more —

Could the speed variable be defined outside the function and still be accessed properly?

For example:
```
var speed = (duration ? duration : 600);

$.fn.extend({

    funkOne: function(duration) {

        $(this).animate({ scrollTop: 0 }, speed);   
    },

    funkTwo: function() {

        $('div').funkOne(300);
    },

    funkThree: function() {

        $('p').funkOne(900);
    }

});
```
Thanks for your help :)
December 18, 2013 at 3:59 pm #158656

Rugg
Participant

@mcjohnst

Excellent explanation! Super clear and easy to understand…thank you. Actually, I now remember reading something about this before, but completely let it escape my memory.

Any idea how I can make the speed variable work outside the fn.extend? It needs to be accessed by other functions that are absent from the sample.

Here is a working fiddle with the speed variable exclusive to the first function: http://jsfiddle.net/nLgLP/

December 18, 2013 at 5:00 pm #158657
TheDoc
Member
No, in this case you can’t have it outside. You could define a default outside but you’d still need to do the check again.
```
var default = 600;

// the following would be somewhere inside your function

var speed = duration ? duration : default
```
December 18, 2013 at 6:05 pm #158663

Rugg
Participant

@thedoc

Perfect! Thank you…
Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

The forum ‘JavaScript’ is closed to new topics and replies.