<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[刘新修]]></title> 
<link>http://pic1.liuxinxiu.com:80/index.php</link> 
<description><![CDATA[刘新修的个人博客 (Liuxinxiu'S Blog)]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[刘新修]]></copyright>
<item>
<link>http://pic1.liuxinxiu.com:80/callback_function/</link>
<title><![CDATA[jQuery动画回调函数]]></title> 
<author>刘新修 &lt;admin@yourname.com&gt;</author>
<category><![CDATA[H5/JS/CSS]]></category>
<pubDate>Sat, 18 May 2013 15:14:14 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/callback_function/</guid> 
<description>
<![CDATA[ 
	<p><span style="color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; text-indent: 2em; -webkit-text-size-adjust: none;">在上一篇文章中，如果想在最后一步切换元素的CSS样式，而不是隐藏元素：</span></p><pre class="prettyprint" style="margin-top: 10px; margin-bottom: 10px; margin-left: 28px; padding: 0.8em 1em; width: 524px; overflow: auto; border: 1px solid rgb(187, 187, 187); background-color: rgb(248, 248, 248); font-size: 12px; font-family: consolas; line-height: 1.4; color: rgb(51, 51, 51); -webkit-text-size-adjust: none;"><span class="pln" style="color: rgb(0, 0, 0);">css</span><span class="pun" style="color: rgb(102, 102, 0);">(</span><span class="str" style="color: rgb(0, 136, 0);">&quot;border&quot;</span><span class="pun" style="color: rgb(102, 102, 0);">,</span><span class="str" style="color: rgb(0, 136, 0);">&quot;solid 5px blue&quot;</span><span class="pun" style="color: rgb(102, 102, 0);">);</span></pre><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em; color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; -webkit-text-size-adjust: none;">如果知识按照常规的方式，将fadeOut(&ldquo;slow&rdquo;)改为css(&ldquo;border&rdquo;,&rdquo;solid 5px blue&rdquo;),并不能达到预期的效果。预期效果是在动画的最后一步改变元素的样式，而实际的效果是，刚开始执行动哈ude时候，css()方法就被执行过了。</p><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em; color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; -webkit-text-size-adjust: none;">出现这个问题的原因是css()方法并不会加入到动画队列中，而是立即执行。可以使用回调函数(callback)对非动画方法实现排队。只要把css()方法写在最后一个动画的回调函数里即可。代码如下：</p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span>$(</span><span class="keyword">function</span><span> () &#123;&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="string">&quot;#panel&quot;</span><span>).click(</span><span class="keyword">function</span><span> () &#123;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="keyword">this</span><span>).animate(&#123;&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left: <span class="string">&quot;400px&quot;</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;height: <span class="string">&quot;200px&quot;</span><span>,&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;opacity: <span class="string">&quot;1&quot;</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;, 3000).animate(&#123;&nbsp;&nbsp;</span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top: <span class="string">&quot;200px&quot;</span><span>,&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width: <span class="string">&quot;200px&quot;</span><span>&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;, 3000, <span class="keyword">function</span><span> () &#123;&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(<span class="keyword">this</span><span>).css(</span><span class="string">&quot;border&quot;</span><span>, </span><span class="string">&quot;5px solid blue&quot;</span><span>);&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&#125;)&nbsp;&nbsp;</span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;&#125;);&nbsp;&nbsp;</span></li><li><span>&#125;);&nbsp;&nbsp;</span></li></ol></div><p style="margin-bottom: 0px; padding-top: 3px; padding-bottom: 3px; text-indent: 2em; color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; -webkit-text-size-adjust: none;"><span style="text-indent: 27.993600845336914px;">这样以来，css()方法就加入到动画队列中了，从而满足了上文提出的需求。</span></p><p>&nbsp;</p><br/>Tags - <a href="http://pic1.liuxinxiu.com:80/tags/jquery/" rel="tag">jquery</a> , <a href="http://pic1.liuxinxiu.com:80/tags/callback/" rel="tag">callback</a> , <a href="http://pic1.liuxinxiu.com:80/tags/animate/" rel="tag">animate</a> , <a href="http://pic1.liuxinxiu.com:80/tags/%25E5%259B%259E%25E8%25B0%2583%25E5%2587%25BD%25E6%2595%25B0/" rel="tag">回调函数</a>
]]>
</description>
</item><item>
<link>http://pic1.liuxinxiu.com:80/callback_function/#blogcomment</link>
<title><![CDATA[[评论] jQuery动画回调函数]]></title> 
<author> &lt;user@domain.com&gt;</author>
<category><![CDATA[评论]]></category>
<pubDate>Thu, 01 Jan 1970 00:00:00 +0000</pubDate> 
<guid>http://pic1.liuxinxiu.com:80/callback_function/#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>