techTutorz: Sliding a division using slideUp & slideDown functions in JQuery

In this post we are going to show : how you can apply slide up & slide down effect to an <div> element with the JQuery slideUp & slideDown function. Although this tutorial aims at applying effects to the <div> element you can almost apply these effects to any html element like <p>, <img>, <table> and so on using the same method. So lets start.

First of all you need to download the JQuery plugin file from http://jquery.com/ to know more about including and using JQuery file read our post downloading and including JQuery API
Create a simple html file with one div & two button as shown below

   <html>
     <head>
     </head>

   <body>

      <div></div>
      <input type="button" id="su" value="Slide Up"></input>
      <input type="button" id="sd" value="Slide Down"></input>

   </body>

   </html>

Then embed the downloaded JQuery file in your html file between the <head> tag using the <script> tag as shown below

   <head>

   <!-- -------------- path of your downloaded jquery file goes inside 'src' attribute ------------ -->
   
   <script type="text/javascript" src="JQuery.js"></script>

   </head>

After that add another <script> tag in <head> and write your JQuery code to apply slide up & slide down effect to the element as shown below


   <script type="text/javascript">

   $(document).ready(function(){

         $("#su").click(function(){

               $("div").slideUp("slow");

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

        });

        $("#sd").click(function(){

              $("div").slideDown("slow"); 

   // u can use 'slow','fast' or numbers in milliseconds to control the speed of transition

        })

   });

   </script>

You are all set and ready to go. Check out the demo given below.

You can download the entire source code by clicking below download button.

Download

Hope you liked our post if you did please link this post to your blog our website and do comment.

Happy Programming !

techTutorz

Pages

Wednesday, April 30, 2014

Sliding a division using slideUp & slideDown functions in JQuery

No comments :

Post a Comment