1

jQuery 中的防弹下拉菜单代码是什么？

编辑：我想根据下面的答案分享我的最终解决方案，我发现这是迄今为止我找到的最好的下拉解决方案。它依赖于http://cherne.net/brian/resources/jquery.hoverIntent.html但由于链接不能给出好的答案，我会将代码内联留在这里，以防它在未来消失。

/*!
 * hoverIntent r7 // 2013.03.11 // jQuery 1.9.1+
 * http://cherne.net/brian/resources/jquery.hoverIntent.html
 *
 * You may use hoverIntent under the terms of the MIT license.
 * Copyright 2007, 2013 Brian Cherne
 */
(function(e){e.fn.hoverIntent=function(t,n,r){var i={interval:100,sensitivity:7,timeout:0};if(typeof t==="object"){i=e.extend(i,t)}else if(e.isFunction(n)){i=e.extend(i,{over:t,out:n,selector:r})}else{i=e.extend(i,{over:t,out:t,selector:n})}var s,o,u,a;var f=function(e){s=e.pageX;o=e.pageY};var l=function(t,n){n.hoverIntent_t=clearTimeout(n.hoverIntent_t);if(Math.abs(u-s)+Math.abs(a-o)<i.sensitivity){e(n).off("mousemove.hoverIntent",f);n.hoverIntent_s=1;return i.over.apply(n,[t])}else{u=s;a=o;n.hoverIntent_t=setTimeout(function(){l(t,n)},i.interval)}};var c=function(e,t){t.hoverIntent_t=clearTimeout(t.hoverIntent_t);t.hoverIntent_s=0;return i.out.apply(t,[e])};var h=function(t){var n=jQuery.extend({},t);var r=this;if(r.hoverIntent_t){r.hoverIntent_t=clearTimeout(r.hoverIntent_t)}if(t.type=="mouseenter"){u=n.pageX;a=n.pageY;e(r).on("mousemove.hoverIntent",f);if(r.hoverIntent_s!=1){r.hoverIntent_t=setTimeout(function(){l(n,r)},i.interval)}}else{e(r).off("mousemove.hoverIntent",f);if(r.hoverIntent_s==1){r.hoverIntent_t=setTimeout(function(){c(n,r)},i.timeout)}}};return this.on({"mouseenter.hoverIntent":h,"mouseleave.hoverIntent":h},i.selector)}})(jQuery)


$('.menu > li.menu-item').hoverIntent(
  function () {
    $(this).addClass('active');
    $(this).find('.sub-menu').slideDown('medium');
  }, 
  function () {
    $(this).removeClass('active');
    $(this).find('.sub-menu').slideUp('medium', function(){
      $(this).stop(true,true);
    });
  }
);
4

2 回答 2

2

当您将鼠标移入和移出时，每次都会附加新动画，它不是恒定的循环，当所有动画完成时它将停止。您只需要添加 stop(true,true) 即可停止所有以前的动画。两个真正的参数都意味着明确的动画排队到这个元素，并转到动画的结尾。

好地方是在 slideUp 动画完成后

$('ul.file_menu').slideUp('medium', function(){
    $(this).stop(true,true);
    });

查看另一个jsfiddle

于 2013-05-10T13:42:20.597 回答
1

嘿，你为什么不使用 hoverIntent jquery 插件。这很棒。它在触发动画之前等待用户的鼠标静止。

http://cherne.net/brian/resources/jquery.hoverIntent.html

我个人很喜欢这个插件...

于 2013-05-10T13:46:21.303 回答