jQuery Sliding Effects

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






jQuery slideUp Method

The jQuery slideUp() method makes the selected HTMLelement to slide up from its position.

Syntax

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().

Example
Output
jquery slideUp method
Try It Now

jQuery slideDown() Method

jQuery slideDown() method makes the selected HTMLelement to slide down from its position.

Syntax

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.


Example
Output
jQuery slideDown method
Try It Now

jQuery SlideToggle() Method

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



jQuery slideToggle() method makes the selectedHTML elements to display or hide with a sliding motion. Meaning it toggles between jQuery slideDown and jQuery slideUp methods.

Syntax

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.

Example
Output
jquery slidetoggle method
Try It Now

Other Advanced jQuery Effects you might want to learn
jQuery Basic Effects

jQuery Fading Effects

jQuery Custom Effects

Sources and Credits

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