uTools-Manuals/docs/jQuery/finish.html

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">.finish()</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/finish/" target="_blank">.finish()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">
<article class="entry method" id="finish1"><h2 class="section-title">
<span class="name">.finish(  [queue ] )</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="finish-queue">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.9/">1.9</a></span>.finish(  [queue ] )</h4>
<ul><li>
<div><strong>queue</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>停止动画队列中的名称。</div>
</li></ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p>当<code>.finish()</code>在一个元素上被调用，立即停止当前正在运行的动画和所有排队的动画（如果有的话），并且他们的CSS属性设置为它们的目标值（注：就是所有动画的目标值）。所有排队的动画将被删除。</p>
<p>如果第一个参数提供，该字符串表示的队列中的动画将被停止。</p>
<p><code>.finish()</code>方法和<code>.stop(true, true)</code>很相似，<code>.stop(true, true)</code>将清除队列，并且目前的动画跳转到其最终值。但是，不同的是，<code>.finish()</code> 会导致所有排队的动画的CSS属性跳转到他们的最终值。</p>
<blockquote>
<p>
			      	动画可能因为全局的<code>$.fx.off</code> 属性设置为 <code>true</code>而停止。当这样做时，所有动画方法将立即设置元素的css属性为其最终调用后的状态，而不是显示动画效果。
			      </p>
</blockquote>
</div>
<section class="entry-examples" id="entry-examples"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-0">
<h4><span class="desc">Click the Go button once to start the animation, and then click the other buttons to see how they affect the current and queued animations.</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>
<div class="line n41">41</div>
<div class="line n42">42</div>
<div class="line n43">43</div>
<div class="line n44">44</div>
<div class="line n45">45</div>
<div class="line n46">46</div>
<div class="line n47">47</div>
<div class="line n48">48</div>
<div class="line n49">49</div>
<div class="line n50">50</div>
<div class="line n51">51</div>
<div class="line n52">52</div>
<div class="line n53">53</div>
<div class="line n54">54</div>
<div class="line n55">55</div>
<div class="line n56">56</div>
<div class="line n57">57</div>
<div class="line n58">58</div>
<div class="line n59">59</div>
<div class="line n60">60</div>
<div class="line n61">61</div>
<div class="line n62">62</div>
<div class="line n63">63</div>
<div class="line n64">64</div>
<div class="line n65">65</div>
<div class="line n66">66</div>
<div class="line n67">67</div>
<div class="line n68">68</div>
<div class="line n69">69</div>
<div class="line n70">70</div>
<div class="line n71">71</div>
<div class="line n72">72</div>
<div class="line n73">73</div>
<div class="line n74">74</div>
<div class="line n75">75</div>
<div class="line n76">76</div>
<div class="line n77">77</div>
<div class="line n78">78</div>
<div class="line n79">79</div>
<div class="line n80">80</div>
<div class="line n81">81</div>
<div class="line n82">82</div>
<div class="line n83">83</div>
<div class="line n84">84</div>
<div class="line n85">85</div>
<div class="line n86">86</div>
<div class="line n87">87</div>
<div class="line n88">88</div>
<div class="line n89">89</div>
<div class="line n90">90</div>
<div class="line n91">91</div>
<div class="line n92">92</div>
<div class="line n93">93</div>
<div class="line n94">94</div>
<div class="line n95">95</div>
<div class="line n96">96</div>
<div class="line n97">97</div>
<div class="line n98">98</div>
<div class="line n99">99</div>
<div class="line n100">100</div>
<div class="line n101">101</div>
<div class="line n102">102</div>
<div class="line n103">103</div>
<div class="line n104">104</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">.box</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">top</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 class="attribute">left</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 class="attribute">width</span>:<span class="value"> <span class="number">15</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">15</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">background</span>:<span class="value"> black;</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="id">#path</span> <span class="rules">{</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">244</span>px;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">font-size</span>:<span class="value"> <span class="number">70</span>%;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">border-left</span>:<span class="value"> <span class="number">2</span>px dashed red;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">border-bottom</span>:<span class="value"> <span class="number">2</span>px dashed green;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">border-right</span>:<span class="value"> <span class="number">2</span>px dashed blue;</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">button</span> <span class="rules">{</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">12</span>em;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">display</span>:<span class="value"> block;</span></span></code></div></div><div class="container"><div class="line"><code>  <span class="rule"><span class="attribute">text-align</span>:<span class="value"> left;</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">0</span> auto;</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">div</span> <span class="attribute">class</span>=<span class="value">"box"</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">div</span> <span class="attribute">id</span>=<span class="value">"path"</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">br</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">"bstt"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.stop(true,true)<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">"bcf"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.clearQueue().finish()<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">br</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">"bstf"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.stop(true, false)<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">"bcs"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.clearQueue().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">br</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">"bsff"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.stop(false, false)<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">"bs"</span> <span class="attribute">class</span>=<span class="value">"b"</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">br</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">"bsft"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.stop(false, true)<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">br</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">"bf"</span> <span class="attribute">class</span>=<span class="value">"b"</span>&gt;</span>.finish()<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>&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">script</span>&gt;</span><span class="javascript"></span></code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> horiz = $(<span class="string">"#path"</span>).width() - <span class="number">20</span>,</code></div></div><div class="container"><div class="line"><code>    vert = $(<span class="string">"#path"</span>).height() - <span class="number">20</span>;</code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code><span class="keyword">var</span> btns = {</code></div></div><div class="container"><div class="line"><code>  bstt: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).stop(<span class="literal">true</span>, <span class="literal">true</span>);</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bs: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).stop();</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bsft: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).stop(<span class="literal">false</span>, <span class="literal">true</span>);</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bf: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).finish();</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bcf: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).clearQueue().finish();</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bsff: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).stop(<span class="literal">false</span>, <span class="literal">false</span>);</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bstf: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).stop(<span class="literal">true</span>, <span class="literal">false</span>);</code></div></div><div class="container"><div class="line"><code>  },</code></div></div><div class="container"><div class="line"><code>  bcs: <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>    $(<span class="string">"div.box"</span>).clearQueue().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> </code></div></div><div class="container"><div class="line"><code> </code></div></div><div class="container"><div class="line"><code>$(<span class="string">"button.b"</span>).on(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  btns[<span class="keyword">this</span>.id]();</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="string">"#go"</span>).on(<span class="string">"click"</span>, <span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code>  $(<span class="string">".box"</span>)</code></div></div><div class="container"><div class="line"><code>    .clearQueue()</code></div></div><div class="container"><div class="line"><code>    .stop()</code></div></div><div class="container"><div class="line"><code>    .css({</code></div></div><div class="container"><div class="line"><code>    left: <span class="number">10</span>,</code></div></div><div class="container"><div class="line"><code>    top: <span class="number">10</span></code></div></div><div class="container"><div class="line"><code>  })</code></div></div><div class="container"><div class="line"><code>    .animate({</code></div></div><div class="container"><div class="line"><code>    top: vert</code></div></div><div class="container"><div class="line"><code>  }, <span class="number">3000</span>)</code></div></div><div class="container"><div class="line"><code>    .animate({</code></div></div><div class="container"><div class="line"><code>    left: horiz</code></div></div><div class="container"><div class="line"><code>  }, <span class="number">3000</span>)</code></div></div><div class="container"><div class="line"><code>    .animate({</code></div></div><div class="container"><div class="line"><code>    top: <span class="number">10</span></code></div></div><div class="container"><div class="line"><code>  }, <span class="number">3000</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>