uTools-Manuals/docs/jQuery/jQuery.queue.html
2019-04-21 11:50:48 +08:00

273 lines
29 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<article class="" id="post-">
<header class="entry-header">
<h1 class="entry-title">jQuery.queue()</h1>
<div class="entry-meta">
所属分类:<span class="category"><a href="/category/data/">数据操作</a></span><span class="category-divider"> | </span><span class="category"><a href="/category/utilities/">工具类</a></span>
<span class="pull-right">英文文档:<a href="https://api.jquery123.com/jQuery.queue/" target="_blank">jQuery.queue()</a></span>
</div><!-- .entry-meta -->
</header><!-- .entry-header -->
<!-- .entry-header -->
<div class="entry-content">显示或操作匹配的元素上已经执行的函数列队。<div class="toc">
<h4><span>Contents:</span></h4>
<ul class="toc-list">
<li>
<a href="#jQuery-queue1">jQuery.queue( element [, queueName ] )</a><ul><li>jQuery.queue( element [, queueName ] )</li></ul>
</li>
<li>
<a href="#jQuery-queue2">jQuery.queue( element, queueName, newQueue )</a><ul>
<li>jQuery.queue( element, queueName, newQueue )</li>
<li>jQuery.queue( element, queueName, callback() )</li>
</ul>
</li>
</ul>
</div><article class="entry method" id="jQuery-queue1"><h2 class="section-title">
<span class="name">jQuery.queue( element [, queueName ] )</span><span class="returns">返回: <a href="/Types/#Array">Array</a></span>
</h2>
<div class="entry-wrapper">
<p class="desc"><strong>描述: </strong>显示在匹配的元素上的已经执行的函数列队。</p>
<ul class="signatures"><li class="signature" id="jQuery-queue-element-queueName">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.3/">1.3</a></span>jQuery.queue( element [, queueName ] )</h4>
<ul>
<li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个用于检查附加列队的DOM元素。</div>
</li>
<li>
<div><strong>queueName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个含有队列名的字符串。默认是 <code>fx</code>,标准的动画队列。</div>
</li>
</ul>
</li></ul>
<div class="longdesc" id="entry-longdesc">
<p><strong>注意:</strong> 这是一个底层的方法,你应该用<code><a href="/queue">.queue()</a></code>代替。</p>
</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">显示列队的长度。</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>
</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 class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">40</span>px;</span></span></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> <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span>px;</span></span> <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">background</span>:<span class="value">green;</span></span> <span class="rule"><span class="attribute">display</span>:<span class="value">none;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span><span class="class">.newcolor</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">blue;</span></span> <span class="rule">}</span></span></code></div></div><div class="container"><div class="line"><code> <span class="tag">span</span> <span class="rules">{ <span class="rule"><span class="attribute">color</span>:<span class="value">red;</span></span> <span class="rule">}</span></span> <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">"show"</span>&gt;</span>Show Length of Queue<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">span</span>&gt;</span><span class="tag">&lt;/<span class="title">span</span>&gt;</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span><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="string">"#show"</span>).click(<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="keyword">var</span> n = jQuery.queue( $(<span class="string">"div"</span>)[<span class="number">0</span>], <span class="string">"fx"</span> );</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"span"</span>).text(<span class="string">"Queue length is: "</span> + n.length);</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> <span class="function"><span class="keyword">function</span> <span class="title">runIt</span><span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).show(<span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).animate({left:<span class="string">'+=200'</span>},<span class="number">2000</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).slideToggle(<span class="number">1000</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).slideToggle(<span class="string">"fast"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).animate({left:<span class="string">'-=200'</span>},<span class="number">1500</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).hide(<span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).show(<span class="number">1200</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).slideUp(<span class="string">"normal"</span>, runIt);</code></div></div><div class="container"><div class="line"><code> }</code></div></div><div class="container"><div class="line"><code> runIt();</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><article class="entry method" id="jQuery-queue2"><h2 class="section-title">
<span class="name">jQuery.queue( element, queueName, newQueue )</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="jQuery-queue-element-queueName-newQueue">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.3/">1.3</a></span>jQuery.queue( element, queueName, newQueue )</h4>
<ul>
<li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个已附加列队函数数组的DOM元素 。</div>
</li>
<li>
<div><strong>queueName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个含有队列名的字符串。默认是 <code>fx</code>,标准的动画队列。</div>
</li>
<li>
<div><strong>newQueue</strong></div>
<div>类型: <a href="/Types/#Array">Array</a>
</div>
<div>一个替换当前函数列队内容的数组。</div>
</li>
</ul>
</li>
<li class="signature" id="jQuery-queue-element-queueName-callback">
<h4 class="name">
<span class="version-details">添加的版本: <a href="/category/version/1.3/">1.3</a></span>jQuery.queue( element, queueName, callback() )</h4>
<ul>
<li>
<div><strong>element</strong></div>
<div>类型: <a href="/Types/#Element">Element</a>
</div>
<div>一个要附加列队函数的DOM元素。</div>
</li>
<li>
<div><strong>queueName</strong></div>
<div>类型: <a href="/Types/#String">String</a>
</div>
<div>一个含有队列名的字符串。默认是 <code>fx</code>,标准的动画队列。</div>
</li>
<li>
<div><strong>callback()</strong></div>
<div>类型: <a href="/Types/#Function">Function</a>()</div>
<div>添加到列队的新函数。</div>
</li>
</ul>
</li>
</ul>
<div class="longdesc" id="entry-longdesc-1">
<p><strong>注意:</strong> 这是一个底层的方法,你应该用<code><a href="/queue">.queue()</a></code>代替。</p>
<p>每个元素可以通过jQuery附加一个或多个函数队列。在大多数程序中只有一个列队(名为 <code>fx</code>)被使用。队列允许一个元素来异步的访问一连串的操作,而不终止整个程序执行。</p>
<p><code>jQuery.queue()</code>方法允许我们直接操纵这个函数队列。最常用的用法是调用 <code>jQuery.queue()</code> 时带一个回调函数,这样就能让我们在队列最后的添加一个新的函数。</p>
<p>值得注意的是,当使用<code>jQuery.queue()</code>添加一个函数的时候,务必确保在函数的最后调用了<code>jQuery.dequeue()</code>,以便能够执行队列中的下一个函数。</p>
</div>
<section class="entry-examples" id="entry-examples-1"><header><h2 class="underline">例子:</h2></header><div class="entry-example" id="example-1-0">
<h4>Example: <span class="desc">将一个自定义函数加入到队列中。</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>
</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></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">40</span>px;</span></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> <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span>px;</span></span> <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">background</span>:<span class="value">green;</span></span> <span class="rule"><span class="attribute">display</span>:<span class="value">none;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code><span class="tag">div</span><span class="class">.newcolor</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">blue;</span></span> <span class="rule">}</span></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> Click here...</code></div></div><div class="container"><div class="line"><code> <span class="tag">&lt;<span class="title">div</span>&gt;</span><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> $(document.body).click(<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"</span>).show(<span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).animate({left:<span class="string">'+=200'</span>},<span class="number">2000</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.queue( $(<span class="string">"div"</span>)[<span class="number">0</span>], <span class="string">"fx"</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="keyword">this</span>).addClass(<span class="string">"newcolor"</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.dequeue( <span class="keyword">this</span> );</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).animate({left:<span class="string">'-=200'</span>},<span class="number">500</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.queue( $(<span class="string">"div"</span>)[<span class="number">0</span>], <span class="string">"fx"</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="keyword">this</span>).removeClass(<span class="string">"newcolor"</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.dequeue( <span class="keyword">this</span> );</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).slideUp();</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-1">
<h4>Example: <span class="desc">通过设置一个队列数组,来删除已有的队列。</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>
</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></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span> <span class="rules">{ <span class="rule"><span class="attribute">margin</span>:<span class="value"><span class="number">3</span>px;</span></span> <span class="rule"><span class="attribute">width</span>:<span class="value"><span class="number">40</span>px;</span></span> <span class="rule"><span class="attribute">height</span>:<span class="value"><span class="number">40</span>px;</span></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> <span class="rule"><span class="attribute">left</span>:<span class="value"><span class="number">0</span>px;</span></span> <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">background</span>:<span class="value">green;</span></span> <span class="rule"><span class="attribute">display</span>:<span class="value">none;</span></span> <span class="rule">}</span></code></div></div><div class="container"><div class="line"><code> <span class="tag">div</span><span class="class">.newcolor</span> <span class="rules">{ <span class="rule"><span class="attribute">background</span>:<span class="value">blue;</span></span> <span class="rule">}</span></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> </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">"start"</span>&gt;</span>Start<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">div</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="string">"#start"</span>).click(<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"</span>).show(<span class="string">"slow"</span>);</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).animate({left:<span class="string">'+=200'</span>},<span class="number">5000</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.queue( $(<span class="string">"div"</span>)[<span class="number">0</span>], <span class="string">"fx"</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="keyword">this</span>).addClass(<span class="string">"newcolor"</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.dequeue( <span class="keyword">this</span> );</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).animate({left:<span class="string">'-=200'</span>},<span class="number">1500</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.queue( $(<span class="string">"div"</span>)[<span class="number">0</span>], <span class="string">"fx"</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="keyword">this</span>).removeClass(<span class="string">"newcolor"</span>);</code></div></div><div class="container"><div class="line"><code> jQuery.dequeue( <span class="keyword">this</span> );</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).slideUp();</code></div></div><div class="container"><div class="line"><code> });</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"#stop"</span>).click(<span class="function"><span class="keyword">function</span> <span class="params">()</span> {</span></code></div></div><div class="container"><div class="line"><code> jQuery.queue( $(<span class="string">"div"</span>)[<span class="number">0</span>], <span class="string">"fx"</span>, [] );</code></div></div><div class="container"><div class="line"><code> $(<span class="string">"div"</span>).stop();</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>