uTools-Manuals/docs/jQuery/stop.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.stop()</h1>
<div class="entry-meta">
						所属分类：<span class="category"><a href="/category/effects/">特效</a> &gt; <a href="/category/effects/custom-effects/">自定义</a></span>
<span class="pull-right">英文文档：<a href="https://api.jquery123.com/stop/" target="_blank">.stop()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="stop1"><h2 class="section-title">
<span class="name">.stop(  [clearQueue ] [, jumpToEnd ] )</span><span class="returns">返回: <a href="/Types/#jQuery">jQuery</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>停止匹配元素当前正在运行的动画。</p>
<ul class="signatures">
<li class="signature" id="stop-clearQueue-jumpToEnd">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.2/">1.2</a></span>.stop(  [clearQueue ] [, jumpToEnd ] )</h4>
<ul>
<li>
<div><strong>clearQueue</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>一个布尔值，指示是否取消以列队动画。默认 <code>false</code>.</div>
</li>
<li>
<div><strong>jumpToEnd</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>一个布尔值指示是否当前动画立即完成。默认<code>false</code>.</div>
</li>
</ul>
</li>
<li class="signature" id="stop-queue-clearQueue-jumpToEnd">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.7/">1.7</a></span>.stop(  [queue ] [, clearQueue ] [, jumpToEnd ] )</h4>
<ul>
<li>
<div><strong>queue</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>停止动画队列的名称。</div>
</li>
<li>
<div><strong>clearQueue</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>一个布尔值，指示是否取消以列队动画。默认 <code>false</code>.</div>
</li>
<li>
<div><strong>jumpToEnd</strong></div>
<div>类型: <a href="/Types/#Boolean">Boolean</a>
</div>
<div>一个布尔值指示是否当前动画立即完成。默认<code>false</code>.</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc">
<p>当一个元素调用<code>.stop()</code>，当前正在运行的动画（如果有的话）立即停止。如果，例如，一个元素用<code>.slideUp()</code>隐藏的时候，调用<code>.stop()</code>，该元素依然会有一部分是处于显示状态的。由于元素上的动画尚未执行完成，所以动画完成时执行的回调函数是不会被调用的。</p>
<p>如果同一元素调用多个动画方法，尚未被执行的动画被放置在元素的效果队列中。这些动画不会开始，直到第一个完成。当调用<code>.stop()</code>的时候，队列中的下一个动画立即开始。如果<code>clearQueue</code>参数提供<code>true</code>值,那么在队列中的动画其余被删除并永远不会运行。</p>
<p>如果提供<code>jumpToEnd</code>参数，并且值为<code>true</code>时，当前动画将停止，但该元素上的 CSS 属性会被立刻修改成动画的目标值。用上面的<code>.slideUp()</code>为例子,该元素将立即隐藏。如果提供回调函数将立即被调用。</p>
<p><strong>从jQuery 1.7开始</strong>, 如果第一个参数是一个字符串， 那么只有该参数所表示的队列中的动画才会被停止。</p>
<p>
			        当我们需要对元素做<code>mouseenter</code>和<code>mouseleave</code>动画时，<code>.stop()</code>方法明显是有效的：</p>
<div class="syntaxhighlighter xml nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"hoverme"</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  Hover me</code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">img</span> <span class="attribute">id</span>=<span class="value">"hoverme"</span> <span class="attribute">src</span>=<span class="value">"book.png"</span> <span class="attribute">alt</span>=<span class="value">""</span> <span class="attribute">width</span>=<span class="value">"100"</span> <span class="attribute">height</span>=<span class="value">"123"</span> /&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<p>我们可以创建一个不错的淡入效果，使用<code>.stop(true, true)</code>链式调用无须排队：</p>
<div class="syntaxhighlighter javascript nogutter">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code>$(<span class="string">'#hoverme-stop-2'</span>).hover(<span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $(<span class="keyword">this</span>).find(<span class="string">'img'</span>).stop(<span class="literal">true</span>, <span class="literal">true</span>).fadeOut();</code></div></div><div class="container"><div class="line"><code>}, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>  $(<span class="keyword">this</span>).find(<span class="string">'img'</span>).stop(<span class="literal">true</span>, <span class="literal">true</span>).fadeIn();</code></div></div><div class="container"><div class="line"><code>});</code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h2>Toggling Animations（切换动画）</h2>
<p><strong>jQuery的1.7 ，</strong> 用<code>.stop()</code> 过早地停止切换动画将触发jQuery的内部效果跟踪。在早先的版本中，如果在切换动画完成之前，调用了 <code>.stop()</code> 方法，会导致动画状态的丢失(如果 jumpToEnd 参数是 false 的话）。此时，任何后续动画将从状态 "half-way" 开始执行，有时这会导致元素消失。要想观察这种行为，请参阅下面最后一个例子。</p>
<blockquote><p>可以通过设置属性<code>$.fx.off</code>为<code>true</code>停止全局的动画 。当这样做，所有动画方法将立即设置元素的最终状态，而不是所谓的显示效果。</p></blockquote>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4>Example: <span class="desc">点击 Go 按钮，立刻开始执行动画。然后点击 STOP 按钮，动画元素会在它所在的位置停下来。另外一种测试方法时，多次点击不同的动画按钮，此时尚未被执行的动画会被添加到动画队列中，而后再点击 STOP 按钮，则会立刻停止当前的动画，继续执行队列中的其它动画。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
<div class="line n27">27</div>
<div class="line n28">28</div>
<div class="line n29">29</div>
<div class="line n30">30</div>
<div class="line n31">31</div>
<div class="line n32">32</div>
<div class="line n33">33</div>
<div class="line n34">34</div>
<div class="line n35">35</div>
<div class="line n36">36</div>
<div class="line n37">37</div>
<div class="line n38">38</div>
<div class="line n39">39</div>
<div class="line n40">40</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="tag">div</span> <span class="rules">{</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">position</span>:<span class="value"> absolute;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#abc</span>;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">left</span>:<span class="value"> <span class="number">0</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">top</span>:<span class="value"><span class="number">30</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">60</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">60</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">5</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"go"</span>&gt;</span>Go<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"stop"</span>&gt;</span>STOP!<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"back"</span>&gt;</span>Back<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="comment">/* Start animation */</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#go"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">".block"</span>).animate({left: <span class="string">'+=100px'</span>}, <span class="number">2000</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* Stop animation when button is clicked */</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#stop"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">".block"</span>).stop();</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="comment">/* Start animation in the opposite direction */</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">"#back"</span>).click(<span class="keyword">function</span>(){</code></div></div><div class="container"><div class="line"><code>$(<span class="string">".block"</span>).animate({left: <span class="string">'-=100px'</span>}, <span class="number">2000</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div>
<div class="entry-example" id="example-1">
<h4>Example: <span class="desc">点击 slideToggle 按钮，会开始动画。然后在动画结束前再次点击该按钮，此时，会立刻从当前位置向反方向开始动画。</span>
</h4>
<div class="syntaxhighlighter xml ">
<table>
<tbody>
<tr>
<td class="gutter">
<div class="line n1">1</div>
<div class="line n2">2</div>
<div class="line n3">3</div>
<div class="line n4">4</div>
<div class="line n5">5</div>
<div class="line n6">6</div>
<div class="line n7">7</div>
<div class="line n8">8</div>
<div class="line n9">9</div>
<div class="line n10">10</div>
<div class="line n11">11</div>
<div class="line n12">12</div>
<div class="line n13">13</div>
<div class="line n14">14</div>
<div class="line n15">15</div>
<div class="line n16">16</div>
<div class="line n17">17</div>
<div class="line n18">18</div>
<div class="line n19">19</div>
<div class="line n20">20</div>
<div class="line n21">21</div>
<div class="line n22">22</div>
<div class="line n23">23</div>
<div class="line n24">24</div>
<div class="line n25">25</div>
<div class="line n26">26</div>
</td>
<td class="code">
<pre><div class="container"><div class="line"><code><span class="doctype">&lt;!DOCTYPE html&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">html</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">style</span>&gt;</span><span class="css"><span class="class">.block</span> <span class="rules">{</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">background-color</span>:<span class="value"> <span class="hexcolor">#abc</span>;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">border</span>:<span class="value"> <span class="number">2</span>px solid black;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">width</span>:<span class="value"> <span class="number">200</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">height</span>:<span class="value"> <span class="number">80</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule"><span class="attribute">margin</span>:<span class="value"> <span class="number">10</span>px;</span></span></code></div></div><div class="container"><div class="line"><code><span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">style</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">script</span> <span class="attribute">src</span>=<span class="value">"https://code.jquery.com/jquery-latest.js"</span>&gt;</span><span class="javascript"></span><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">head</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code>  <span class="tag">&lt;<span class="title">button</span> <span class="attribute">id</span>=<span class="value">"toggle"</span>&gt;</span>slideToggle<span class="tag">&lt;/<span class="title">button</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">div</span> <span class="attribute">class</span>=<span class="value">"block"</span>&gt;</span><span class="tag">&lt;/<span class="title">div</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;<span class="title">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> $block = $(<span class="string">'.block'</span>);</code></div></div><div class="container"><div class="line"><code><span class="comment">/* Toggle a sliding animation animation */</span></code></div></div><div class="container"><div class="line"><code>$(<span class="string">'#toggle'</span>).on(<span class="string">'click'</span>, <span class="keyword">function</span>() {</code></div></div><div class="container"><div class="line"><code>    $block.stop().slideToggle(<span class="number">1000</span>);</code></div></div><div class="container"><div class="line"><code>});</code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">script</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">body</span>&gt;</span></code></div></div><div class="container"><div class="line"><code><span class="tag">&lt;/<span class="title">html</span>&gt;</span></code></div></div></pre>
</td>
</tr>
</tbody>
</table>
</div>
<h4>Demo:</h4>
<div class="demo code-demo"></div>
</div></section>
</div></article> </div>
</article>