[duration ] [easing ] [callback/complete ] )
Ex :
|
$("#div").slideToggle("slow", function() {ย // Execute after Animation completed. }); |
Duration/speed |
ย It specifies the speed of the fadein. The valuse may be slow, fast and milliseconds. (default value: 400).ย Durationย are given in milliseconds and higher values indicate slower animations, not faster ones. |
Easing |
ย It specifies the easing function to be used for transition (default value: swing). |
Callback |
A function to call once the animation is complete. |
Example:
From the below code, the selected (โdivFadeBoxโ) will be slideUp and slideDown based up on their initial display.ย For example, if the selected element is hidden state then slideToggle will performย the slideUp else it will perform the slideDown animation .
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
|
<html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function () { $("#divflipBox").click(function () { $("#divpanelBox").slideToggle("slow"); }); }); </script> <style type="text/css"> #divflipBox, #divpanelBox { background-color: #a0ce4e; border: solid 1px #c3c3c3; width: 25%; } #divpanelBox { padding: 30px; } </style> </head> <body> <div id="divflipBox"> Click to slideToggle </div> <div id="divpanelBox"> Hello Welcome to dotnet-helpers.com slideToggle() example Learn MVC, ASP , JQuery with best examples. Thanks for visiting. </div> </body> </html> |
Output:

Leave A Comment