jquery hover 不停闪动问题的解决方法(亦为stop()的使用)

 更新时间:2017年02月10日 10:12:39   投稿:jingxian  
下面小编就为大家带来一篇jquery hover 不停闪动问题的解决方法(亦为stop()的使用)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

在前端开发中用的较多的是jquery,之前遇到一个问题,一个下拉的jquery下拉菜单效果,hover上去,一直闪动,用mouseovermouseout好好的,当时没搞定,今天逛论坛看到一个方法,可以行.只怪自己之前看jquery api的时候不是很仔细。

解决闪动 可以使用Stop()

stop([clearQueue],[jumpToEnd])

概述

停止所有在指定元素上正在运行的动画。

如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

参数

[clearQueue],[gotoEnd] Boolean,BooleanV1.2clearQueue:如果设置成true,则清空队列。可以立即结束动画。

gotoEnd: 让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

[queue],[clearQueue],[jumpToEnd]BooleanV1.7queue:用来停止动画的队列名称

clearQueue: 如果设置成true,则清空队列。可以立即结束动画。

jumpToEnd: 如果设置成true,则完成队列。可以立即完成动画。

当鼠标移上去的时候就菜单下拉,当鼠标离开的时候菜单上卷,下拉和上卷的动画时间都是5秒种。

$("#menu").hover( 
    function () { 
      $("#menu").animate({ height: "500" }, 5000); 
    }, 
    function () { 
      $("#menu").animate({ height: "100" }, 5000); 
    } 
);

如果我快速不断地将鼠标移入移出菜单(即,当菜单下拉动画未完成时,鼠标又移出了菜单)就会产生“动画积累”,当鼠标停止移动后,积累的动画还会持续执行,直到动画序列执行完毕。这样导致动画效果与鼠标动作不一致。

要解决此问题只需要在移入移出动画之前加入stop(),结束当前动画进入下个动画即可。

代码如下:

$("#menu").hover( 
    function () { 
      $("#menu").stop().animate({ height: "500" }, 5000); 
    }, 
    function () { 
      $("#menu").stop().animate({ height: "100" }, 5000); 
    } 
);

如果需到组合动画,在移入移出动画之前加入stop()来停止当前动画,如下

$("#menu").hover( 
    function () { 
      $("#menu").stop().animate({ height: "500" }, 5000).animate({ width: "500px" }, 3000); 
    }, 
    function () { 
      $("#menu").stop().animate({ height: "100" }, 5000).animate({ width: "100px" },3000); 
    } 
);

效果并不好,因为stop()只是停止了当前第一步的动画(即{height:”500″}),然后又进入了第二步的动画(即[width:”500″})。

此时stop()的第一个参数就派上了用场,它会把下面没有执行的动画序列都清空掉。

$("#menu").hover( 
    function () { 
      $("#menu").stop(true).animate({ height: "500" }, 5000).animate({ width: "500px" }, 5000); 
    }, 
    function () { 
      $("#menu").stop(true).animate({ height: "100" }, 5000).animate({ width: "100px" },5000); 
    } 
);

当然也可以使用第二个参数,让动画达到最后状态。如:stop(false,true)

以上这篇jquery hover 不停闪动问题的解决方法(亦为stop()的使用)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • jquery 操作日期、星期、元素的追加的实现代码

    jquery 操作日期、星期、元素的追加的实现代码

    主要实现日期的显示,获取年月日,时分秒、星期、判断闰年,学习jquery的朋友可以参考下
    2012-02-02
  • JQuery 学习笔记 选择器之五

    JQuery 学习笔记 选择器之五

    测试代码如下,本例子中设置的着色比较多,哈,都是随便输些数字进去的,感觉这样更容易让大家看到效果,呵,如果我的讲的有哪不好麻烦大家多留言教导下^^
    2009-07-07
  • 解决Jquery下拉框数据动态获取的问题

    解决Jquery下拉框数据动态获取的问题

    下面小编就为大家分享一篇解决Jquery下拉框数据动态获取的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • jQuery链式操作实例分析

    jQuery链式操作实例分析

    这篇文章主要介绍了jQuery链式操作,实例分析了jQuery基于链式操作动态改变页面元素样式的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • 修改或扩展jQuery原生方法的代码实例

    修改或扩展jQuery原生方法的代码实例

    这篇文章主要介绍了修改或扩展jQuery原生方法的代码实例,本文用一个扩展jquery原生方法val的例子,讲解了如何对jquery原生方法修改或扩展,需要的朋友可以参考下
    2015-01-01
  • 详解jquery方法属性

    详解jquery方法属性

    这篇文章主要介绍了jquery的方法属性,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2021-11-11
  • jQuery窗口、文档、网页各种高度的精确理解

    jQuery窗口、文档、网页各种高度的精确理解

    这篇文章主要帮助大家快速理解jQuery浏览器窗口、网页文档及可视窗口的各种高度,需要的朋友可以参考下
    2014-07-07
  • 深入理解jquery中的each用法

    深入理解jquery中的each用法

    本文主要对jquery中的each用法进行介绍,相信会对大家学习each方法会很有帮助,下面就跟小编一起来看下吧
    2016-12-12
  • jquery ui对话框实例代码

    jquery ui对话框实例代码

    在网页设计中,不论是为了减少于由于页面跳转而带来的不友好用户体验,还是为了维持桌面应用程序的使用习惯,对话框的设计都是不可或缺的。
    2013-05-05
  • 遍历jquery对象的代码分享

    遍历jquery对象的代码分享

    今天遇到一个问题需要获取tagName,使用jquery,查询了一下,大家说用$("dd").attr("tagName")能获取到,但是得到的返回值是undefined,于是又查询饿了许久,返回遍历了一下jquery封装的对象
    2011-11-11

最新评论