正確的做jQuery懸停下拉菜單的方法

什麼是jQuery中的防彈下拉菜單代碼？正確的做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); 
    }); 
    } 
);

來源

2013-05-10 deweydb

以供將來參考，如果你提建議的解決方案或鏈接代碼示例之前，首先描述該問題的一個問題是要讀者不易混淆。 – Zhihao 2013-05-10 13:38:46

這就是我所做的，因此客戶可以在那裏看到有Font項目文件的樣本。 http://jsfiddle.net/cornelas/8gNt9/1/我沒有流體slideDown只是因爲它會關閉然後打開然後關閉，只是從來沒有修復它導致下拉工作效果，該項目需要。 – Cam 2013-05-10 14:12:18

@肇浩，謝謝我已經更新了問題，首先有問題。 – deweydb 2013-05-10 14:28:20

當你的了新的動畫被每一次，它不是恆定的循環，將在所有的動畫將完成停止追加移動鼠標。所有你需要的是添加停止（true，true）來停止所有以前的動畫。這兩個真實的參數意味着清晰的動畫排隊到這個元素，並且到動畫結束。

好地方，這將是效果基本show動畫完成後

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

見另一jsfiddle

來源

2013-05-10 13:42:20 paulitto

謝謝！我錯過了我停下來的兩個參數！但我確實覺得這個解決方案仍然存在問題。如果用戶以向上的動作快速移動鼠標經過菜單，它會快速打開並關閉，這沒有用處，而且看起來很糟糕。此外，如果用戶從上方快速拖動鼠標經過菜單，他們的菜單做了一個奇怪的閃爍的事情，或者在用戶退出菜單區域之前關閉。因此，我不會說這是一個防彈解決方案。 – deweydb 2013-05-10 14:43:22

好吧，你說得對，但是有更好的地方停止（真實，真實）。我更新了答案和[jsfiddle]（http://jsfiddle.net/paulitto/4jxph/1713/）。嘗試玩這個 – paulitto 2013-05-10 15:02:08

該鏈接是與上面的答案中的鏈接相同的鏈接。 – deweydb 2013-05-10 15:04:54

嘿你爲什麼不使用hoverIntent jQuery插件。這很棒。它在觸發動畫之前等待用戶的鼠標靜止。

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

我個人很喜歡這個插件...

來源

2013-05-10 13:46:21

謝謝，我會讓你的回答也是正確的，如果我可以標記兩者。 – deweydb 2013-05-10 15:27:47

正確的做jQuery懸停下拉菜單的方法

回答

相關問題