How do I change the speed of a jQuery show/hide over time?

Question

I want to take a regular jQuery show/hide, like the slideDown method: $('p').slideDown('fast'); and make it so that it slows down as it gets closer to the end, providing a somewhat animated effect as opposed to the default linear rate. I forget how this is done. Via the callback function somehow?

Answer 1

See this please. You can use the slideToggle function and specify the speed to it like this:

 slideToggle('slow');
 slideToggle('fast');
 slideToggle('2000');

Answer 2

You're referring to easing. This is available in some jQuery effects, but not all of them. Earlier in 2009, LearningjQuery.com did an article on this very topic demonstrating how you can add it to your jQuery animations: http://www.learningjquery.com/2009/02/quick-tip-add-easing-to-your-animations

Answer 3

Hey Doug (great name :)

Its called "easing" and jQuery supports two easing methods: "swing" (default) and "linear". What you want can be achieved by using the easing plugin by itself, or jquery ui core (which also includes the easing plugin). That site has a number of examples how to use it.

Once you have included the plugin, you can use it like this:

$('p').slideDown('fast', "easeOutQuart");