Change function animation duration?

[Rugg]

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!

[TheDoc]

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.

[Rugg]

@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 :)

[Rugg]

@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/

[TheDoc]

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

[Rugg]

@thedoc

Perfect! Thank you…

[Author]

Posts