解决jquery animate动画效果出现的抖动

起因:在做鼠标滑过商品缩略图,弹出“添加购物车”按钮的动画效果时,出现了动画闪烁的问题,后来发现是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'});
});
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,422评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,217评论 0 1
  • //------------------------- 第一章 认识JQuery ----------------...
    米塔塔阅读 766评论 0 9
  • 第一章 事件篇 鼠标事件 1. click与dbclick事件 click(): 监听用户的单机操作 dbclic...
    七弦桐语阅读 498评论 0 2
  • jQuery中的动画 show()方法和hide()方法 控制元素的显示与隐藏,可以为该方法添加参数,使得元素可以...
    AuthorJim阅读 285评论 0 1