jQuery Sliding Effects

jQuery slideUp Method

Durations are given in milliseconds; higher values indicate slower animations and lower values indicate faster animations.

The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used. The following example illustrates usage of slideToggle(). In this example the ‘div’ element slide up by calling $( "div" ).slideUp().

jQuery slideDown() Method

Durations are given in milliseconds; higher values indicate slower animations and lower values indicate faster animations. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively. If any other string is supplied, or if the duration parameter is omitted, the default duration of 400 milliseconds is used.

The following example illustrates usage of jquery slideDown(). In this example the ‘div’ element slide down by calling $( "div" ).slideDown( "slow").where slow is indicate duration.

jQuery SlideToggle() Method

Before you understand about the jquery slideToggle() method try to understand how jquery slideDown method slideUp method works.

If the selected element is slide down, slideToggle() will slide it up. If slide up, slideToggle() will slide it down.

The following example illustrates usage of slideToggle(). In this example the ‘div’ element will be hidden or displayed by calling .slideToggle( "slow", function(){}) method. where slow indicate duration.

The content and methods in the tutorial has been referred and updated with jQuery API and The jQuery Foundation

Last Updated Jul 21, 2015, 12:00:06 PM