关闭

jQuery动画的hover连续触发动画bug处理_让hover事件只触发一次动画的实现

时间: 2018-07-06阅读: 2516标签: jquery

一个简单的鼠标滑过的动画而已,但是当我测试的时候发现,当我发神经似的来回滑动时,事件就被触发了多次,动画也就重复了多次,怎么才能不重复出现,即动画过程中,鼠标滑过这个div,不会触发该事件。代码如下:

$("div").hover(
    function() {
        $(this).animate({"margin-top":"100px"},1000);
    }, 
    function() {
        $(this).animate({"margin-top":"200px"},1000);
    }
);


这是由于元素绑定hover事件之后,如果光标移入移出的速度太快,导致移入的动画还没执行完,就移出光标,则移出的动画效果就会被放到队列,等移入的动画完成后在执行。因此如果光标的移入移出速度太快,就会导致动画效果与移动光标不一致,出现重复出现的情况。


下面是几种解决办法

1、你可以使用jq的stop方法:

$(div).stop(false, true).animate({'margin-top':'100px'},1000);

如果stop()的第一个参数为true,表示立即清除当前的动画队列,默认为fx;如果第二个参数为true,表示立即将当前正在执行的动画置为它的结束状态。  

停止元素的动画:stop([cleanQueue, gotoEnd]):第一个参数代表是否要清空未执行完的动画队列,第二个参数代表是否直接将正在执行的动画跳转到末状态。(可缺省)。

(1)无参数stop():立即停止当前的动画,如果接下来还有动画则以当前状态开始接下来的动画。
(2)stop(false, true) : 当前的动画直接达到末状态。
(3)stop(true, true) : 当前的动画直接达到末状态并清空当前对象的动画队列。

注意:jQuery只能设置正在执行的动画的最终状态,不能直接达到未执行动画的最终状态。


2、执行动画前判断一下:

if (!$(obj).is(':animated')) {
        // to do something
}


3、延迟

var $v_show = $(".opp-header-bg");
$(".opp-header-container").hover(function(){
   $v_show.slideDown(50);
},function(){
    setTimeout(function(){ $v_show.slideUp(50)} , 300 ); 
});


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/911

关于jquery中ready()方法的几种写法总结

ready()方法作用:在页面加载完成后,立即执行指定的函数。这么做的好处是可以减少页面渲染的时间,加快页面加载,提升用户体验。ready()相比onload事件绑定函数的优势:具有较高优先级,只需等到html结构加载完成后即可执行;

在jQuery中使用自定义属性

在jquery中 自定义属性及值,默认以下都是在class=‘acitve‘对象中 进行自定义属性操作:自定义属性格式:data-xxxx;审查元素是看不到该属性的,只能输出控制台可以看到该值。

js和jquery设置css的几种方式

js设置样式的方法: 直接设置style的属性 某些情况用这个设置 !important值无效、直接设置属性(只能用于某些属性,相关样式会自动识别); 使用setProperty 如果要设置!important,推荐用这种方法设置第三个参数

时隔一年,jQuery 发布 3.4.0 版本

jQuery 团队的核心开发者 Timmy Willison 今天在官网宣布了 jQuery 3.4.0,这距离上个版本 3.3.x 系列的推出已过去了一年多。Timmy 表示这可能是 3.x 分支的最后一个小版本更新,接下来的工作重心将是 jQuery 4.0 大版本的更新。

jquery寻找节点

通过javascript的getElementsByTagName获取到的节点的元素是一个dom合集对象 , 通过jQuery生成的对象是一个做了包装处理的对象 。注意上面的方法 返回的是jquery 集合 需要继续用jq的方法操作或取值。

高版本jquery中attr和prop的区别

在高版本的jquery引入prop方法后,什么时候该用prop?什么时候用attr?对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

原生JS替代jQuery的各种方法汇总

前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

原生js中DOM对象转成jQuery对象、jQuery 对象转成 DOM 对象的实现

jquery是对js语言的封装、扩展,实现了对浏览器的兼容,使用jquery能让操作更方便简洁,这篇文章主要讲解原生js中Dom对象和jquery对象的相互转换。

jQuery 常用小技巧分享

整理一些简单技巧的集合,帮你提升 jQuery 技能,你可以直接拿来使用,下面内容包括:禁止右键点击、隐藏搜索文本框文字、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器...

前端UI攻城狮 你们该抛弃jQuery了

Web工程师太依赖jQuery了,某种意义上说jQuery已经成了JavaScript的同义词。但是我们真的需要他么?或许我们应该反思一下什么时候才真的需要jQuery。对我个人而言开始使用jQuery的理由是他把我的工作变得简单多了

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!