2
<ul class="UIAPIPlugin-toc">
3
<li><a href="#overview">Overview</a></li>
4
<li><a href="#options">Arguments</a></li>
6
<div class="UIAPIPlugin">
7
<h1>jQuery UI effect</h1>
9
<h2 class="top-header">Overview</h2>
10
<div id="overview-main">
11
<div class="editsection" style="float:right;margin-left:5px;">[<a href="http://docs.jquery.com/action/edit/UI/Effects/effect?section=1" title="Edit section: effect( effect, [options], [speed], [callback] )">edit</a>]</div><a name="effect.28_effect.2C_.5Boptions.5D.2C_.5Bspeed.5D.2C_.5Bcallback.5D_.29"></a><h3>effect( effect, <span class="optional">[</span>options<span class="optional">]</span>, <span class="optional">[</span>speed<span class="optional">]</span>, <span class="optional">[</span>callback<span class="optional">]</span> )</h3>
12
<p>Uses a specific effect on an element (without the show/hide logic).</p>
14
<div id="overview-dependencies">
20
<div id="overview-example">
22
<div id="overview-example" class="example">
23
<ul><li><a href="#demo"><span>Demo</span></a></li><li><a href="#source"><span>View Source</span></a></li></ul>
24
<p><div id="demo" class="tabs-container" rel="170">
25
Apply the effect explode if you click on the element.<br />
27
<pre>$("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
28
$("div").<strong class="selflink">effect</strong>("explode");
31
<p></div><div id="source" class="tabs-container">
33
<pre><!DOCTYPE html>
36
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
37
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
38
<script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
39
<script src="http://ui.jquery.com/latest/ui/effects.explode.js"></script>
40
<style type="text/css">
41
div { margin: 0 auto; width: 100px; height: 80px; background: blue; position: relative; }
43
<script type="text/javascript">
44
$(document).ready(function(){
45
$("p").<a href="http://docs.jquery.com/Events/click" title="Events/click">click</a>(function () {
46
$("div").<strong class="selflink">effect</strong>("explode");
51
<body style="font-size:62.5%;">
53
<p>Click me</p><div></div>
63
<h2 class="top-header">Arguments</h2>
64
<ul class="options-list">
66
<li class="option" id="option-effect">
67
<div class="option-header">
68
<h3 class="option-name"><a href="#option-effect">effect</a></h3>
70
<dt class="option-type-label">Type:</dt>
71
<dd class="option-type">String</dd>
75
<div class="option-description">
76
<p>The effect to be used. Possible values: 'blind', 'bounce', 'clip', 'drop', 'explode', 'fold', 'highlight', 'puff', 'pulsate', 'scale', 'shake', 'size', 'slide', 'transfer'.</p>
81
<li class="option" id="option-options">
82
<div class="option-header">
83
<h3 class="option-name"><a href="#option-options">options</a></h3>
85
<dt class="option-type-label">Type:</dt>
86
<dd class="option-type">Hash</dd>
88
<dt class="option-optional-label">Optional</dt>
92
<div class="option-description">
93
<p>A object/hash including specific options for the effect.</p>
98
<li class="option" id="option-speed">
99
<div class="option-header">
100
<h3 class="option-name"><a href="#option-speed">speed</a></h3>
102
<dt class="option-type-label">Type:</dt>
103
<dd class="option-type">String, Number</dd>
105
<dt class="option-optional-label">Optional</dt>
109
<div class="option-description">
110
<p>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).</p>
115
<li class="option" id="option-callback">
116
<div class="option-header">
117
<h3 class="option-name"><a href="#option-callback">callback</a></h3>
119
<dt class="option-type-label">Type:</dt>
120
<dd class="option-type">Function</dd>
122
<dt class="option-optional-label">Optional</dt>
126
<div class="option-description">
127
<p>A function that is called after the effect is completed.</p>
136
Pre-expand include size: 6221 bytes
137
Post-expand include size: 8750 bytes
138
Template argument size: 5488 bytes
139
Maximum: 2097152 bytes
142
<!-- Saved in parser cache with key jqdocs_docs:pcache:idhash:2612-1!1!0!!en!2 and timestamp 20090319011013 -->