起因:在做鼠标滑过商品缩略图,弹出“添加购物车”按钮的动画效果时,出现了动画闪烁的问题,后来发现是animate重复执行了。
解决办法:在animate方法前面加入stop()清空 防止重复执行。
例子:
$(" btn1").animate(top:'136px');
改为
$(" btn1").stop().animate(top:'136px');
进一步:为鼠标经过事件添加延迟处理,即mouseenter()添加setTimeout();
var time = null;
$(".price_list1"). mouseenter (function() {
var a =$(this).find('#btn1');
timer = setTimeout(function(){
a.stop().animate({top:'136px'},200);
},300);
});
$(".price_list1").mouseleave (function(){
var a =$(this).find('#btn1');
if(timer){
clearTimeout(timer);
}
a.animate({top:'161px'});
});