用jQuery动画来做特效，怎么防止多次点击动画停不下来的问题？
<styletype="text/css">*{margin:0;padding:0;list-style:none;text-decoration:none;font-...
<style type="text/css">
*{ margin:0; padding:0; list-style:none; text-decoration:none; font-family:"微软雅黑";}
.art{ width:1000px; height:380px; margin:0 auto;}
.list{ width:50px; height:380px; float:left; overflow:hidden; position:relative;}
.list.on{ width:800px;}
.list.a0{ background-color:#FC0;}
.list.a1{ background-color:#F33;}
.list.a2{ background-color:#09C;}
.list.a3{ background-color:#33F;}
.list.a4{ background-color:#6C9;}
.list .lt{ width:50px; height:380px; cursor:pointer; position:absolute; left:0px; top:0px;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var dang=4
var lock=1
$(function(){
$(".list").addClass(function(i){
return "a"+i
})
$(".art .list .lt").mouseenter(function(){
var t=$(".art .list .lt").index(this)
if(t==dang){}else{
$(".art .list:eq("+dang+")").animate({"width":"50px"},300)
$(".art .list:eq("+t+")").animate({"width":"800px"},300)
dang=t
}
})
})
</script>
</head>
<body>
<div class="art">
<div class="list">
<div class="lt"></div>
</div>
<div class="list">
<div class="lt"></div>
</div>
<div class="list">
<div class="lt"></div>
</div>
<div class="list">
<div class="lt"></div>
</div>
<div class="list on">
<div class="lt"></div>
</div>
</div>
</body>
比如这段代码点快了更不停不下来，每次经过都要调用一次，有什么办法让他一个动画完了之后再调用下一个动画。 展开
*{ margin:0; padding:0; list-style:none; text-decoration:none; font-family:"微软雅黑";}
.art{ width:1000px; height:380px; margin:0 auto;}
.list{ width:50px; height:380px; float:left; overflow:hidden; position:relative;}
.list.on{ width:800px;}
.list.a0{ background-color:#FC0;}
.list.a1{ background-color:#F33;}
.list.a2{ background-color:#09C;}
.list.a3{ background-color:#33F;}
.list.a4{ background-color:#6C9;}
.list .lt{ width:50px; height:380px; cursor:pointer; position:absolute; left:0px; top:0px;}
</style>
<script src="js/jquery-1.8.3.min.js"></script>
<script>
var dang=4
var lock=1
$(function(){
$(".list").addClass(function(i){
return "a"+i
})
$(".art .list .lt").mouseenter(function(){
var t=$(".art .list .lt").index(this)
if(t==dang){}else{
$(".art .list:eq("+dang+")").animate({"width":"50px"},300)
$(".art .list:eq("+t+")").animate({"width":"800px"},300)
dang=t
}
})
})
</script>
</head>
<body>
<div class="art">
<div class="list">
<div class="lt"></div>
</div>
<div class="list">
<div class="lt"></div>
</div>
<div class="list">
<div class="lt"></div>
</div>
<div class="list">
<div class="lt"></div>
</div>
<div class="list on">
<div class="lt"></div>
</div>
</div>
</body>
比如这段代码点快了更不停不下来，每次经过都要调用一次，有什么办法让他一个动画完了之后再调用下一个动画。 展开
1个回答
展开全部
$(".art .list:eq("+dang+")").stop().animate({"width":"50px"}
,300);
$(".art .list:eq("+t+")").stop().animate({"width":"800px"}
,300);
,300);
$(".art .list:eq("+t+")").stop().animate({"width":"800px"}
,300);
追问
到最后确实能停下来了，但是中间还是一个动画没完成就调用下一个动画，鼠标快速移动还是有bug，有没有办法让他动画完成之后再调用下一个动画，就像js加锁似的，谢谢
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
