jquery sliding effects

jquery sliding example.

jquery slide methods slides elements up and down.

jquery has the following slide methods.

  • jquery slideup()
  • jquery slidedown()
  • jquery slidetoggle()

jquery slidedown() method

display the matched elements with sliding motion.

jquery slideDown method syntax :-

      $( selector ).slidedown	( speed, callback );
  • speed -a string or number determining how long the animation will run.
  • callback -it's a function to call once the animation is complete.

jquery slidedown method example

                 <script
                   
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
                   
                   </script>
                   
                   <script>
                   
                   $(document).ready(function(){
                   
                   $(".slidedown").click(function(){
                  
                   $("img.first").slidedown('slow');
                   
                   $("img.second").slidedown(4000);
                   
                   $("img.third").slidedown(5000);
                   
                      }); });
                      
             </script>

note:- with slidedown(),the java-script interpreter makes the selected element(s) appear by animating its height from 0 to whatever the height is set to in the css style.

using callback parameter in the slideDown method - slideDown(callback) method example


jquery slideup() method

jquery slideup() method is used to hide the matched elements with a sliding motion.

jquery slideup method syntax :-

       $( selector ).slideup( speed, callback );
  • speed -a string or number determining how long the animation will run.
  • callback -it's a function to call once the animation is complete.

jquery slideUp method example

                <script> 
       
                   $(document).ready(function(){
                   
                   $(".slideup").click(function(){
                   
                   $("img.first").slideup(1000);
                   
                   $("img.second").slideup(2000);
                   
                   $("img.third").slideup(3000);
                   
                       }); });                  
                    
        </script>

Jquery slideUp method with callback parameter example - slideUp(callback)

note:- with slideup(),the java-script interpreter tells the dom to change the css height property for the selected element(s) to 0 and then sets the display property to none.it's essentially a hide with a slide.


jquery slidetoggle() method

the slidetoggle() method toggles between the slidedown() and slideup() methods.

if the elements have been slid down, slidetoggle() will slide them up.

if the elements have been slid up, slidetoggle() will slide them down .

jquery slideToggle method syntax :-

      $( selector ).slidetoggle( speed, callback );
  • speed -a string or number determining how long the animation will run.
  • callback -it's a function to call once the animation is complete.

jquery slideToggle example :-

                 <script
         
src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" >
         
         </script>
         
         <script>
         
                   $(document).ready(function(){
                   
                   $(".slidetoggle").click(function(){
                   
                   $("img.first").slidetoggle(3000);
                   
                   $("img.second").slidetoggle('fast');
                   
                   $("img.third").slidetoggle(5000);
                   
                    }); });
                    
                   </script>
                

jquery slideToggle method with callback example slideToggle(callback)