New window
Etiam libero neque, luctus a, eleifend nec, semper at, lorem. Sed pede. Nulla lorem metus, adipiscing ut, luctus sed, hendrerit vitae, mi.
Click the button above to preview the effect.
The enhanced toggle method optionally accepts jQuery UI advanced effects.
Uses a specific effect on an element to toggle the element if the first argument is an effect string.
$("p").click(function () { $("div").toggle("slide", {}, 1000); });
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/jquery.ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.4.2.js"></script> <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script> <style type="text/css"> div { display: none; margin: 0px; width: 100px; height: 80px; background: blue; position: relative; } </style> <script type="text/javascript"> $( document ).ready( function() { $("p").click(function () { $("div").toggle("slide", {}, 1000); }); } ); </script> </head> <body style="font-size:62.5%;"> <p>Click me</p><div></div> </body> </html>
The effect to be used. Possible values: 'blind', 'clip', 'drop', 'explode', 'fold', 'puff', 'slide', 'scale', 'size', 'pulsate'.
A object/hash including specific options for the effect.
Durations are given in milliseconds; higher values indicate slower animations, not faster ones. The strings 'fast' and 'slow' can be supplied to indicate durations of 200 and 600 milliseconds, respectively.
A function that is called after the effect is completed.