Question

js问题 jquery问题 jquery的animate重复执行应该怎么解决

$(document).ready(function(){
$(".main-diban ul li img").mouseover(function(){
$(this).animate({width:"50px"},1000);
});
$(".main-diban ul li img").mouseout(function(){$(this).animate({width:"80"},1000);
});
})//多次用鼠标指向和离开图片的时候当我鼠标停止的时候图片任然在持续变宽变窄，鼠标指向和离开多少次它就执行多少次，应该怎么解决？

Answer 1

<script type="text/javascript">
/*可用stop()函数立即停止动画，再去执行当前时间产生的效果。这样却产生了一个问题：比如我的mouseover时间刚执行了500毫秒，但是我马上执行
mouseout的实现效果了，用了1000毫秒去完成本来500秒能完成的事件效果，这个在视觉上和效益上都有点问题，因此本人想出了一个小方法，有点戳，莫见笑:
定义一个计数器timer，默认值是1000,如果未中断动画时间为timer赋值1000，否则，即任何状况的动画执行过程被中断，则下一个动画事件执行时间：
timer=未执行效果效益百分比*1000
*/
$(document).ready(function(){
var timer = 1000;
$(".main-diban ul li img").mouseover(function(){
if($(this).is(":animated"))
{
//它要变小所以 时间为:效益差百分比*效益时间
timer=($(this).width()-50)/30*1000;
$("#test").html(timer);
}
else
{
timer = 1000;
}
$(this).stop().animate({width:"50px"},timer);
});
$(".main-diban ul li img").mouseout(function(){
if($(this).is(":animated"))
{
//原理同上
timer=(80-$(this).width())/30*1000;
}
else
{
timer = 1000;
}
$(this).stop().animate({width:"80px"},timer);
});
})
</script>

Answer 2

$(this).animate({width:"50px"},1000);

这一句更改为：

$(this).stop().css({width:"80"}).animate({width:"50px"},1000);     //先停止上一次动作，并复原图片尺寸，再执行动画

 

 

$(this).animate({width:"80"},1000);

这一句更改为：

$(this).stop().css({width:"50"}).animate({width:"80px"},1000);     //先停止上一次动作，并复原图片尺寸，再执行动画

Answer 3

$(document).ready(function(){
if( !$(".main-diban ul li img").is(":animated") ){
$(".main-diban ul li img").mouseover(function(){
$(this).animate({width:"50px"},1000);    
 });     
 $(".main-diban ul li img").mouseout(function(){$(this).animate({width:"80"},1000);    
});
}
})

Answer 4

执行animate前先结束动作
$(this).stop(true,true).animate{......}

Answer 5

这样的句子干嘛不写在css里面
.main-diban ul li img：hover{
width:80px;
}