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 show the effect.
Uses a specific effect on an element (without the show/hide logic).
$("p").click(function () { $("div").effect("explode"); });
<!DOCTYPE html> <html> <head> <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" /> <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script> <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script> <script src="http://ui.jquery.com/latest/ui/effects.explode.js"></script> <style type="text/css"> div { margin: 0 auto; width: 100px; height: 80px; background: blue; position: relative; } </style> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function () { $("div").effect("explode"); }); }); </script> </head> <body style="font-size:62.5%;"> <p>Click me</p><div></div> </body> </html>
The effect to be used. Possible values: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.
A object/hash including specific options for the effect.
A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).
A function that is called after the effect is completed.