Question

jquery animate 加上频繁操做导致的问题

我想做一个图片轮播的效果，4个div做为导航 其中轮换中用到了animate（）,动画完成后改变当前的图片即 改变class为cur，同时移除之前的cur，测试时，如果点击过快，那么就导致cur的变换问题，从面显示空白图片，求解决办法？代码贴下
$("#box-list ul li").mouseover(function(){

if(!$("#picture-list .cur").hasClass($(this).attr("class")))
{
$("div",this).css({'background-color':'purple'}).parent().siblings().find("div").css({'background-color':'transparent'});
$('#picture-list').find("."+$(this).attr("class")).show().siblings().hide();
$('#picture-list .cur').css("z-index",'1').animate({left:'300px'},1000).hide("normal");
$('#picture-list .cur').animate({'left':'0px'},'0').removeClass("cur");
$('#picture-list').find("."+$(this).attr("class")).addClass("cur");
$('#picture-list img').show();
}
});
<div id="bottom" class="break">
<div id="picture-list">
<img class="first cur" src="./images/girl.jpg" />
<img class="second" src="./images/girl2.jpg" />
<img class="third" src="./images/girl3.jpg" />
<img class="fourth" src="./images/girl4.jpg" />
</div>
<div id="box-list">
<ul>
<li class="first"><div></div></li>
<li class="second"><div></div></li>
<li class="third"><div></div></li>
<li class="fourth"><div></div></li>
</ul>
</div>

Answer 1

因为之前的动画没执行完然后之后的动画又开始的问题~用queue就可以解决~其实animate还有别的模式，你可以去看看JQ1.8的API~那里面写的清楚，把queue设置成false就行了~

Answer 2

动画开始前先调用stop()
$.fn.stop([clearQueue],[jumpToEnd])

Answer 3

用$("#id:not(:animate)").animate(...);试试