The jQuery slide methods slides elements up and down. jQuery comes with three handy methods to create the sliding effect easily :
1 2 3 | slideDown() slideUp() slideToggle() |
jQuery slideUp() Method
The jQuery slideUp() method is used to slide up/hide an element.
Syntax:
1 | $(anyselector).slideUp(speed,callback); |
Both are optional parameter.
Speed : parameter specifies the duration of the effect (“slow”, “fast”, or milliseconds (default:400)).
Callback : function to be executed after the sliding completes.
1 2 3 4 5 6 7 8 9 10 | Example : <script> $(document).ready(function(){ $("#menu").click(function(){ $("#menubar").slideUp(); }); }) </script> |
jQuery slideDown() Method
The jQuery slideDown() method is used to slide down/display an element with sliding effect.
Syntax:
1 | $(anyselector).slideDown(speed,callback); |
Speed: specifies the duration of the effect(“slow”, “fast”, or milliseconds(default:400))
callback: function to be executed after the sliding completes.
1 2 3 4 5 6 7 8 9 10 | Example : <script> $(document).ready(function(){ $("#menu").click(function(){ $("#menubar").slideDown(); }); }) </script> |
jQuery slideToggle() Method
If the matched element is displayed, it will hide with a slide up effect; if hidden, it will display with a slide down effect.
Syntax:
1 | $(anyselector).slideToggle(speed,callback); |
Speed: specifies the duration of the effect(“slow”, “fast”, or milliseconds(default:400))
callback: function to be executed after the sliding completes.
1 2 3 4 5 6 7 8 9 10 | Example : <script> $(document).ready(function(){ $("#menu").click(function(){ $("#menubar").slideToggle(); }); }) </script> |
Examples :
1 2 3 4 | <div id="clickme"> Click Me </div> <img id="book" src="icon.png" alt="" width="100" height="123"> |
We will cause .slideToggle()/.slideUp()/.slideDown() to be called when another element is clicked:
1 2 3 4 5 | $( "#clickme" ).click(function() { $( "#book" ).slideToggle( "slow", function() { // Animation complete. }); }); |
If the Book Panel is displaying then on click of “clickme”, we can call slideUp method for hiding the panel.
1 2 3 4 5 | $( "#clickme" ).click(function() { $( "#book" ).slideUp( "slow", function() { // Animation complete. }); }); |
If we want to display Book Panel on click of “clickme”, we can call slideDown method.
1 2 3 4 5 | $( "#clickme" ).click(function() { $( "#book" ).slideDown( "slow", function() { // Animation complete. }); }); |
All these three jQuery slideUp(), slideDown() and slideToggle() methods are very important to display/hide panel with sliding effects.