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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
|
<!DOCTYPE html>
<html lang='en'><head><meta http-equiv='content-type' content='text/html; charset=UTF-8' /></head><body>
<div class="entry-content">
<div class="entry-title roundTop">
<h1 class="jq-clearfix">.stop()</h1>
<div class="entry-meta jq-clearfix">
Categories:
<span class="category"><a href="http://api.jquery.com/category/effects/" title="View all posts in Effects">Effects</a> > <a href="http://api.jquery.com/category/effects/custom-effects/" title="View all posts in Custom">Custom</a></span>
</div>
</div>
<div id="stop1" class="entry method">
<h2 class="jq-clearfix roundTop section-title">
<span class="name">.stop( [clearQueue] [, jumpToEnd] )</span> <span class="returns">Returns: <a class="return" href="http://api.jquery.com/Types/#jQuery">jQuery</a></span>
</h2>
<div class="jq-box roundBottom entry-details">
<p class="desc"><strong>Description: </strong>Stop the currently-running animation on the matched elements.</p>
<ul class="signatures">
<li class="signature" id="stop-clearQueue-jumpToEnd">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.2/">1.2</a></span>.stop( [clearQueue] [, jumpToEnd] )</h4>
<p class="arguement"><strong>clearQueue</strong>A Boolean indicating whether to remove queued animation as well. Defaults to <code>false</code>.</p>
<p class="arguement"><strong>jumpToEnd</strong>A Boolean indicating whether to complete the current animation immediately. Defaults to <code>false</code>.</p>
</li>
<li class="signature" id="stop-queue-clearQueue-jumpToEnd">
<h4 class="name">
<span class="versionAdded">version added: <a href="/category/version/1.7/">1.7</a></span>.stop( [queue] [, clearQueue] [, jumpToEnd] )</h4>
<p class="arguement"><strong>queue</strong>The name of the queue in which to stop animations.</p>
<p class="arguement"><strong>clearQueue</strong>A Boolean indicating whether to remove queued animation as well. Defaults to <code>false</code>.</p>
<p class="arguement"><strong>jumpToEnd</strong>A Boolean indicating whether to complete the current animation immediately. Defaults to <code>false</code>.</p>
</li>
</ul>
<div class="longdesc">
<p>When <code>.stop()</code> is called on an element, the currently-running animation (if any) is immediately stopped. If, for instance, an element is being hidden with <code>.slideUp()</code> when <code>.stop()</code> is called, the element will now still be displayed, but will be a fraction of its previous height. Callback functions are not called.</p>
<p>If more than one animation method is called on the same element, the later animations are placed in the effects queue for the element. These animations will not begin until the first one completes. When <code>.stop()</code> is called, the next animation in the queue begins immediately. If the <code>clearQueue</code> parameter is provided with a value of <code>true</code>, then the rest of the animations in the queue are removed and never run.</p>
<p>If the <code>jumpToEnd</code> argument is provided with a value of <code>true</code>, the current animation stops, but the element is immediately given its target values for each CSS property. In our above <code>.slideUp()</code> example, the element would be immediately hidden. The callback function is then immediately called, if provided.</p>
<p><strong>As of jQuery 1.7</strong>, if the first argument is provided as a string, only the animations in the queue represented by that string will be stopped.</p>
<p>The usefulness of the <code>.stop()</code> method is evident when we need to animate an element on <code>mouseenter</code> and <code>mouseleave</code>:</p>
<pre><div id="hoverme">
Hover me
<img id="hoverme" src="book.png" alt="" width="100" height="123" />
</div></pre>
<p>We can create a nice fade effect without the common problem of multiple queued animations by adding <code>.stop(true, true)</code> to the chain:</p>
<pre>$('#hoverme-stop-2').hover(function() {
$(this).find('img').stop(true, true).fadeOut();
}, function() {
$(this).find('img').stop(true, true).fadeIn();
});</pre>
<h2>Toggling Animations</h2>
<p><strong>As of jQuery 1.7,</strong> stopping a toggled animation prematurely with <code>.stop()</code> will trigger jQuery's internal effects tracking. In previous versions, calling the <code>.stop()</code> method before a toggled animation was completed would cause the animation to lose track of its state (if jumpToEnd was false). Any subsequent animations would start at a new "half-way" state, sometimes resulting in the element disappearing. To observe the new behavior, see the final example below.</p>
<blockquote><p>Animations may be stopped globally by setting the property <code>$.fx.off</code> to <code>true</code>. When this is done, all animation methods will immediately set elements to their final state when called, rather than displaying an effect.</p></blockquote>
</div>
<h3>Examples:</h3>
<div class="entry-examples" id="entry-examples">
<div id="example-0">
<h4>Example: <span class="desc">Click the Go button once to start the animation, then click the STOP button to stop it where it's currently positioned. Another option is to click several buttons to queue them up and see that stop just kills the currently playing one.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>div {
position: absolute;
background-color: #abc;
left: 0px;
top:30px;
width: 60px;
height: 60px;
margin: 5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">STOP!</button>
<button id="back">Back</button>
<div class="block"></div>
<script>
/* Start animation */
$("#go").click(function(){
$(".block").animate({left: '+=100px'}, 2000);
});
/* Stop animation when button is clicked */
$("#stop").click(function(){
$(".block").stop();
});
/* Start animation in the opposite direction */
$("#back").click(function(){
$(".block").animate({left: '-=100px'}, 2000);
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div id="example-1">
<h4>Example: <span class="desc">Click the slideToggle button to start the animation, then click again before the animation is completed. The animation will toggle the other direction from the saved starting point.</span>
</h4>
<pre class="prettyprint"><code class="example demo-code"><!DOCTYPE html>
<html>
<head>
<style>.block {
background-color: #abc;
border: 2px solid black;
width: 200px;
height: 80px;
margin: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
</head>
<body>
<button id="toggle">slideToggle</button>
<div class="block"></div>
<script>
var $block = $('.block');
/* Toggle a sliding animation animation */
$('#toggle').on('click', function() {
$block.stop().slideToggle(1000);
});
</script>
</body>
</html></code></pre>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
</div>
</div>
</div>
</div>
</body></html>
|
