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 show method optionally accepts jQuery UI advanced effects.
Uses a specific effect on an element to show the element if the first argument is a effect string.
$("p").click(function () { $("div").show("slide", {}, 1000); });
<!DOCTYPE html> <html> <head> <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.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> $(document).ready(function() { $("p").click(function () { $("div").show("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.
A string representing one of the predefined speeds ("slow" or "fast") or the number of milliseconds to run the animation (e.g. 1000).
A function that is called after the effect is completed.