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
Mar 09 Javascript
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
Bookmarklet实现启动jQuery(模仿 云输入法)
Sep 15 Javascript
利用Bootstrap实现表格复选框checkbox全选
Dec 21 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
AngularJS路由Ui-router模块用法示例
May 29 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
记一次vue去除#问题处理经过小结
Jan 24 Javascript
JS使用栈判断给定字符串是否是回文算法示例
Mar 04 Javascript
小谈angular ng deploy的实现
Apr 07 Javascript
html5 录制mp3音频支持采样率和比特率设置
Jul 15 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
phpcms手机内容页面添加上一篇和下一篇
2015/06/05 PHP
优化WordPress中文章与评论的时间显示
2016/01/12 PHP
详解Yii实现分页的两种方法
2017/01/14 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
jQuery.ajax 用户登录验证代码
2010/10/29 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
jquery鼠标滑过提示title具体实现代码
2013/08/06 Javascript
javascript dom追加内容实现示例
2013/09/21 Javascript
javascript实现显示和隐藏div方法汇总
2015/08/14 Javascript
jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
2016/09/04 Javascript
vue 2.0路由之路由嵌套示例详解
2017/05/08 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
2017/06/19 Javascript
jQuery完成表单验证的实例代码(纯代码)
2017/09/30 jQuery
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
详解VueJS应用中管理用户权限
2018/02/02 Javascript
10分钟上手vue-cli 3.0 入门介绍
2018/04/04 Javascript
JavaScript数组,JSON对象实现动态添加、修改、删除功能示例
2018/05/26 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
解决vue字符串换行问题(绝对管用)
2020/08/06 Javascript
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
[52:39]完美世界DOTA2联赛PWL S3 CPG vs Forest 第一场 12.16
2020/12/17 DOTA
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python selenium实现微博自动登录的示例代码
2018/05/16 Python
python并发编程多进程 模拟抢票实现过程
2019/08/20 Python
Python多线程爬取豆瓣影评API接口
2019/10/22 Python
Python实现搜索算法的实例代码
2020/01/02 Python
Python cookie的保存与读取、SSL讲解
2020/02/17 Python
西安当代医院管理研究院笔试题
2015/12/11 面试题
《明天,我们毕业》教学反思
2014/04/24 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
2014年社区个人工作总结
2014/12/02 职场文书
2014年学校体育工作总结
2014/12/08 职场文书
Python批量将csv文件转化成xml文件的实例
2021/05/10 Python