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 相关文章推荐
javascript基础的动画教程,直观易懂
Jan 10 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
Sep 15 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JQuery触发事件例如click
Sep 11 Javascript
js自定义回调函数
Dec 13 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
Mar 13 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
利用layer实现表单完美验证的方法
Sep 26 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
js原生map实现的方法总结
Jan 19 Javascript
js获取本日、本周、本月的时间代码
Feb 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实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
THINKPHP2.0到3.0有哪些改进之处
2015/01/04 PHP
fromCharCode和charCodeAt 方法
2006/12/27 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
extJS中常用的4种Ajax异步提交方式
2014/03/07 Javascript
关闭浏览器窗口弹出提示框并且可以控制其失效
2014/04/15 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
js实现的简单radio背景颜色选择器代码
2015/08/18 Javascript
jQuery地图map悬停显示省市代码分享
2015/08/20 Javascript
jquery ztree异步搜索(搜叶子)实践
2016/02/25 Javascript
基于Jquery插件Uploadify实现实时显示进度条上传图片
2020/03/26 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
2016/05/31 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
2017/09/21 jQuery
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
2017/10/26 Javascript
jquery ajax异步提交表单数据的方法
2017/10/27 jQuery
jfinal与bootstrap的登出实战详解
2017/11/27 Javascript
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
微信小程序slider组件使用详解
2018/01/31 Javascript
jQuery中内容过滤器简单用法示例
2018/03/31 jQuery
JS用最简单的方法实现四舍五入
2019/08/27 Javascript
微信小程序顶部导航栏可滑动并选中放大
2019/12/05 Javascript
js实现简单抽奖功能
2020/11/24 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
如何利用python查找电脑文件
2018/04/27 Python
django中使用POST方法获取POST数据
2019/08/20 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
美国电视购物HSN官网:HSN
2016/09/07 全球购物
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
汽车制造与装配专业自荐信范文
2014/01/02 职场文书
遗体告别仪式答谢词
2014/01/23 职场文书
大学运动会入场词
2014/02/22 职场文书
村庄环境整治方案
2014/05/15 职场文书
2014年医院科室工作总结
2014/12/20 职场文书
新员工考核评语
2014/12/31 职场文书
python中filter,map,reduce的作用
2022/06/10 Python