jQuery 的 slideUp 和 slideDown 下拉卷动问题

最初公司前端写了个导航菜单，鼠标停留时弹出下拉菜单，移走鼠标时收缩下拉菜单，可就是这个简单的功能，T！！M！！D！！你屮它屮快了的时候，下拉菜单就不完整了，就像~~~包茎？？

本来官方提供的方法，会出现这种问题：如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...

但是我们的会包茎，对，没错。

$(this).find("a").stop().slideUp();

因为多了个stop，会停止掉当前执行的脚本，如果当前下拉菜单正在卷动的过程中，那它的样式（主要是高度）就会被修改，并且一直是被修改的那个高度，再次触发下拉时，也只有那么一点点。。。。

所以删掉了stop方法，增加一个setTimeout，成为下面的完整代码，效果OK，也不会出现上面演示页面中的问题。

// 线程 IDsvar mouseover_tid = [];var mouseout_tid = [];jQuery(document).ready(function(){jQuery(".menu .nav li").each(function(index){jQuery(this).hover(// 鼠标进入function(){var _self = this;// 停止卷起事件clearTimeout(mouseout_tid[index]);// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中mouseover_tid[index] = setTimeout(function() {$(this).find("a").addClass("current");jQuery(_self).find('.box').slideDown(200);}, 201);},// 鼠标离开function(){var _self = this;// 停止展开事件clearTimeout(mouseover_tid[index]);// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中mouseout_tid[index] = setTimeout(function() {$(this).find("a").removeClass("current");jQuery(_self).find('.box').slideUp(200);}, 201);});});});

转载于:https://my.oschina.net/wanily/blog/343981

jQuery 的 slideUp 和 slideDown 下拉卷动问题相关推荐

用原生JavaScript写出类似jQuery中slideUp和slideDown效果
JavaScript是本人自学的第一门语言,也是本人目前最喜欢的一门语言.由于是自学,加上没有做过任何项目(只是偶尔自己做一些小效果玩玩),所以水平不咋地,写得不好之处,欢迎各位指正. 前言在我自学 ...
php jq ajax 4个下拉框联动案列,Ajax与Jquery结合数据库做出实现下拉框的二级联动...
这次给大家带来Ajax与Jquery结合数据库做出实现下拉框的二级联动,Ajax与Jquery结合数据库做出实现下拉框二级联动的注意事项有哪些,下面就是实战案例,一起来看一下. 首先我们需要先建立好数 ...
jQuery实现一个淡入淡出下拉菜单非常简易
前段时间我一直在向大家推荐CSS3和HTML5的东西,尽管看上去很炫,但也有不少网友抱怨兼容性问题,所以今天开始我也会陆续向大家介绍一些兼容性较好的jQuery插件.今天先分享一款利用jQuery实现 ...
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层、Dialog的问题
IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的问题参考文章: (1)IE6下使用jquery.bgiframe.js插件解决下拉框覆盖浮动层.Dialog的 ...
html下拉框只选择年份和月份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下代码: Document 1949 var date = new Date(); var y = date.g ...
html只选择年份,原生jQuery实现只显示年份下拉框
本文实例为大家分享了jQuery实现只显示年份下拉框的具体代码,供大家参考,具体内容如下代码: Document 1949 var date = new Date(); var y = date.g ...
easyui下拉框option_js和jQuery以及easyui实现对下拉框的指定赋值实例分享
本文主要为大家分享一篇js和jQuery以及easyui实现对下拉框的指定赋值方法,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. js实现: 1. 通过让第i个o ...
android中点击头像放大,Android头像下拉缩放动效
头像下拉缩放动效头像下拉缩放这个在IOS中很常见,最近在Github上也看到了类似的效果,所以决定把它集成到我现在做的项目中去. Github上的开源地址:https://github.com/Fr ...
CSS + jQuery 实现的超 Sexy 下拉菜单
早前发现了 Soh Tanaka 分享的非常 Sexy 的 Drop Down Menu w/ jQuery & CSS,稍作修改实现了多级下拉,并实现了 ASP.NET 中通过输出 HTML ...

jQuery 的 slideUp 和 slideDown 下拉卷动问题

jQuery 的 slideUp 和 slideDown 下拉卷动问题相关推荐

最新文章

热门文章