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 相关文章推荐
jquery复选框CHECKBOX全选、反选
Aug 30 Javascript
jQuery代码优化 事件委托篇
Nov 01 Javascript
移动节点的jquery代码
Jan 13 Javascript
jQuery判断checkbox是否选中的3种方法
Aug 12 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
Sep 01 Javascript
ES6中Symbol类型用法实例详解
Apr 06 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 Javascript
vuex的简单使用教程
Feb 02 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
Oct 31 Javascript
vue cli安装使用less的教程详解
Jul 12 Javascript
javascript自定义日期比较函数用法示例
Jul 22 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下利用shell后台运行PHP脚本,并获取该脚本的Process ID的代码
2011/09/19 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
使用PHP如何实现高效安全的ftp服务器(二)
2015/12/30 PHP
php中引用符号(&)的使用详细介绍
2016/12/06 PHP
phpcms实现验证码替换及phpcms实现全站搜索功能教程详解
2017/12/13 PHP
Javascript中call的两种用法实例
2013/12/13 Javascript
jQuery实现的Tab滑动选项卡及图片切换(多种效果)小结
2015/09/14 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
2017/08/03 Javascript
浅谈vue中.vue文件解析流程
2018/04/24 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
处理Python中的URLError异常的方法
2015/04/30 Python
Python实现的购物车功能示例
2018/02/11 Python
python批量替换多文件字符串问题详解
2018/04/22 Python
实用自动化运维Python脚本分享
2018/06/04 Python
Python并行分布式框架Celery详解
2018/10/15 Python
Python中的 enum 模块源码详析
2019/01/09 Python
python 实现视频流下载保存MP4的方法
2019/01/09 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
python获取百度热榜链接的实例方法
2020/08/25 Python
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
Soft Cotton捷克:来自爱琴海棉花的浴袍
2017/02/01 全球购物
技术总监岗位职责
2013/12/05 职场文书
英文导游欢迎词
2014/01/11 职场文书
班班通项目实施方案
2014/02/25 职场文书
授权委托书样本
2014/04/03 职场文书
生日庆典策划方案
2014/06/02 职场文书
体育节口号
2014/06/19 职场文书
公司董事长助理工作职责
2014/07/12 职场文书
村党支部对照检查材料思想汇报
2014/09/28 职场文书
群众路线查摆问题整改措施思想汇报
2014/10/10 职场文书
忆童年!用Python实现愤怒的小鸟游戏
2021/06/07 Python
Django路由层如何获取正确的url
2021/07/15 Python