<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">
<channel>
<title><![CDATA[刘新修]]></title> 
<link>http://liuxinxiu.com:80/index.php</link> 
<description><![CDATA[刘新修的个人博客 (Liuxinxiu'S Blog)]]></description> 
<language>zh-cn</language> 
<copyright><![CDATA[刘新修]]></copyright>
<item>
<link>http://liuxinxiu.com:80/jquery_if_animated_stop/</link>
<title><![CDATA[jQuery停止动画和判断是否处于动画状态]]></title> 
<author>刘新修 &lt;admin@yourname.com&gt;</author>
<category><![CDATA[H5/JS/CSS]]></category>
<pubDate>Sat, 18 May 2013 16:07:32 +0000</pubDate> 
<guid>http://liuxinxiu.com:80/jquery_if_animated_stop/</guid> 
<description>
<![CDATA[ 
	<p>&nbsp;<strong style="color: rgb(42, 42, 42); font-family: Verdana, Arial, Tahoma; font-size: 12px; line-height: 25px; text-indent: 2em; margin: 0px; padding: 0px;">1、停止元素的动画</strong></p><p style="margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; line-height: 25px; background-color: rgb(232, 232, 232); font-family: Verdana, Arial, Tahoma; font-size: 12px; text-indent: 2em; color: rgb(42, 42, 42);">很多时候需要停止匹两己元素正在进行的动画，例如上例的动画，如l果需要在某处停止动画，需要使用stop()方法。stop()方法的语法缩构为：</p><p style="margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; line-height: 25px; background-color: rgb(232, 232, 232); font-family: Verdana, Arial, Tahoma; font-size: 12px; text-indent: 2em; color: rgb(42, 42, 42);">stop([clearQueue][,gotoEnd]);</p><p style="margin-bottom: 0px; padding-top: 5px; padding-bottom: 5px; border: 0px; list-style: none; word-wrap: normal; word-break: normal; line-height: 25px; background-color: rgb(232, 232, 232); font-family: Verdana, Arial, Tahoma; font-size: 12px; text-indent: 2em; color: rgb(42, 42, 42);">参数clearQHCHC和gotoEnd都足町选的参数，为Boolean值(ture或flase)。clearQueue代表足胥婴清空术执&#123;j．完的动嘶队列，90toEnd代表是否直接将萨在执行的动画跳转到术状态。<br style="margin: 0px; padding: 0px;" />&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;<wbr></wbr>&nbsp;如粜商接使川stop()方法．!【!IJ会。一即停．l卜专前一在进行的动画，如．粜接下来还有动画等待继续进行．呲0以当前状态J r始接下柬的动画。经常会遇到这种情况．在为。&rsquo;个元索绑定hover事件之后．Jf】户把光标移入元素时会触发动画效粜，而当这个动画还没结束时，用户就将光标移出这个元素了，J且j么光标移出的动画效粜将会被放进队列之中，等待光标移入的动画结束后再执行。I蚓此如粜光标移入移出搿过快就会导致动画效粜．b光标的动作不一1致。此时只要神：光标的移入、移出动越之前加入stop()力&lsquo;法，就能解决这个问题。stop()方法会结束当前j下在进行的动l画，并立即执行队列中个动画。以下代码就可以解决刚才的问题。</p><p><strong style="color: rgb(42, 42, 42); font-family: Verdana, Arial, Tahoma; font-size: 12px; line-height: 25px; text-indent: 24px; background-color: rgb(232, 232, 232); margin: 0px; padding: 0px;">2．判断元素是否处于动画状态</strong></p><p><span style="color: rgb(62, 62, 62); font-family: 'Open Sans', georgia; line-height: 20px; text-indent: 27.993600845336914px; -webkit-text-size-adjust: none;">在使用animate()方法的时候，要避免动画积累而导致的动画与用户的行为不一致.当用户快速在某个元素上执行animate()动画的时，就会出现动画积累。解决方法是判断元素是否正处于动画状态，如果元素不处于动画状态，才为元素添加新的动画，否则不添加。代码如下：</span></p><div class="codeText"><div class="codeHead">JavaScript代码</div><ol start="1" class="dp-c"><li class="alt"><span><span class="keyword">if</span><span>&nbsp;(!$(element).is(</span><span class="string">&quot;:animated&quot;</span><span>))&nbsp;&#123;&nbsp;&nbsp;&nbsp;</span></span></li><li><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//判断元素是否正处于动画状态</span><span>&nbsp;&nbsp;</span></span></li><li class="alt"><span>&nbsp;&nbsp;&nbsp;&nbsp;<span class="comment">//如果没有进行动画，则添加动画</span><span>&nbsp;&nbsp;</span></span></li><li><span>&#125;&nbsp;&nbsp;</span></li></ol></div><p><span style="color: rgb(42, 42, 42); font-family: Verdana, Arial, Tahoma; font-size: 12px; line-height: 25px; text-indent: 24px; background-color: rgb(232, 232, 232);">这个判断方法在animate()动画中经常被用到，需</span><span style="color: rgb(42, 42, 42); font-family: Verdana, Arial, Tahoma; font-size: 12px; line-height: 25px; text-indent: 24px; background-color: rgb(232, 232, 232);">要特别注意。</span></p><br/>Tags - <a href="http://liuxinxiu.com:80/tags/jquery/" rel="tag">jquery</a> , <a href="http://liuxinxiu.com:80/tags/if/" rel="tag">if</a> , <a href="http://liuxinxiu.com:80/tags/animated/" rel="tag">animated</a> , <a href="http://liuxinxiu.com:80/tags/stop/" rel="tag">stop</a>
]]>
</description>
</item><item>
<link>http://liuxinxiu.com:80/jquery_if_animated_stop/#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://liuxinxiu.com:80/jquery_if_animated_stop/#blogcomment</guid> 
<description>
<![CDATA[ 
	
]]>
</description>
</item>
</channel>
</rss>