Sliding Effect in jQuery:
In jQuery we have the slide method to give the sliding effect. With the slide method we can slide up and slide down the HTML elements.
There are three types of jQuery sliding methods:
- slideDown()
- slideUp()
- slideToggle()
slideDown():
To slide down a HTML element in jQuery you have the slideDown() method.
Syntax:
$(selector).slideDown(speed, callback);
In above syntax we passed two parameters in it. Both parameters are optional means if you don’t want to specify it the function will also work.
- Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
- Callback: The callback parameter will executed after the sliding completes.
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <title>Sliding Down Effect in jQuery</title> <script src="jquery-1.11.1.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideDown("fast"); }); }); </script> <style> #panel,#flip { padding:5px; text-align:center; background-color:#FF9; border:solid 1px #c3c3c3; } #panel { padding:50px; display:none; } </style> </head> <body> <h2>Click on the slide it will open the slide in down </h2> <div id="flip">Click to slide down panel</div> <div id="panel">Welcome to jQuery Tutorial "Sliding Effect"!</div> </body> </html> |
slideUp():
To slide up a HTML element in jQuery you have the slideUp() method.
Syntax:
$(selector).slideUp(speed, callback);
In above syntax we passed two parameters in it. Both parameters are optional means if you don’t want to specify it the function will also work.
- Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
- Callback: The callback parameter will executed after the sliding completes.
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<!DOCTYPE html> <html> <head> <title>Sliding Up effect in jQuery</title> <script src="jquery-1.11.1.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideUp("slow"); }); }); </script> <style> #panel,#flip { padding:5px; text-align:center; background-color:#FF9; border:solid 1px #c3c3c3; } #panel { padding:50px; } </style> </head> <body> <h2>Click on the slide and it will move up </h2> <div id="flip">Click to slide up panel</div> <div id="panel">Welcome to jQuery Tutorial "Sliding Effect"!</div> </body> </html> |
slideToggle():
If you want to do slide up and slide down with the help of clicking only one button. Means the slideToggle() function is use to toggle between slideUp() and slideDown().
If the HTML element is slide up than the slideToggle() will slide down them.
If the HTML element is slide down than the slideToggle() will slide up them.
Syntax:
$(selector).slideToggle(speed, callback);
In above syntax we passed two parameters in it. Both parameters are optional means if you don’t want to specify it the function will also work.
- Speed: The speed parameter specifies the time or interval or duration of the effect. It take following values: “slow”, “fast” and “milliseconds”
- Callback: The callback parameter will executed after the sliding completes.
Example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html> <head> <title>Sliding up and down Effect in jQuery with Toggle</title> <script src="jquery-1.11.1.js"></script> <script> $(document).ready(function(){ $("#flip").click(function(){ $("#panel").slideToggle("fast"); }); }); </script> <style> #panel,#flip { padding:5px; text-align:center; background-color:#FF9; border:solid 1px; } #panel { padding:50px; display:none; } </style> </head> <body> <h2>Click on the slide it will move up and down this is created by slideToggle() method</h2> <div id="flip">Click to slide the panel down or up</div> <div id="panel">Hello world! Welcome to Jquery Tutorial "Sliding Effect".</div> </body> </html> |
Leave a Reply