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


Posted in Javascript onFebruary 10, 2017

在前端开发中用的较多的是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()的使用)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js中判断控件是否存在
Aug 25 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
js 金额文本框实现代码
Feb 14 Javascript
JS 实现Table相同行的单元格自动合并示例代码
Aug 27 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
使用JavaScript 实现的人脸检测
Mar 24 Javascript
javascript相关事件的几个概念
May 21 Javascript
JavaScript实现select添加option
Jul 03 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
一个小时快速搭建微信小程序的方法步骤
Apr 15 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
vue设置动态请求地址的例子
Nov 01 Javascript
JS验证不重复验证码
Feb 10 #Javascript
使用jquery给新生的th绑定hover事件的实例
Feb 10 #Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
Feb 10 #Javascript
jQuery移除或禁用html元素点击事件常用方法小结
Feb 10 #Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 #Javascript
Bootstrap轮播图学习使用
Feb 10 #Javascript
微信小程序模板之分页滑动栏
Feb 10 #Javascript
You might like
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP获取windows登录用户名的方法
2014/06/24 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
thinkphp5框架结合mysql实现微信登录和自定义分享链接与图文功能示例
2019/08/13 PHP
修复IE9&safari 的sort方法
2011/10/21 Javascript
javascript多行字符串的简单实现方式
2015/05/04 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
js闭包引起的事件注册问题介绍
2016/03/29 Javascript
使用node.js中的Buffer类处理二进制数据的方法
2016/11/26 Javascript
jquery 实现复选框的全选操作实例代码
2017/01/24 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
EasyUI Tree树组件无限循环的解决方法
2017/09/27 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
node内置调试方法总结
2018/02/22 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
微信小程序使用for循环动态渲染页面操作示例
2018/12/25 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
jQuery带控制按钮轮播图插件
2020/07/31 jQuery
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
Python如何使用Gitlab API实现批量的合并分支
2019/11/27 Python
Python flask框架实现浏览器点击自定义跳转页面
2020/06/04 Python
浅谈tensorflow中dataset.shuffle和dataset.batch dataset.repeat注意点
2020/06/08 Python
浅谈python锁与死锁问题
2020/08/14 Python
Python实现爬取网页中动态加载的数据
2020/08/17 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
美国婚戒购物网站:Anjays Designs
2017/06/28 全球购物
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
大学生就业自我鉴定
2013/10/26 职场文书
经理职责范文
2013/11/08 职场文书
制药工程专业职业生涯规划范文
2014/03/10 职场文书
行政部岗位职责范本
2014/03/13 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
工作会议通知
2015/04/15 职场文书
社区党支部承诺书
2015/04/29 职场文书
Mysql中的触发器定义及语法介绍
2022/06/25 MySQL