在jQuery動畫之前實現短暫停頓

我正在編寫一個簡單的jquery菜單系統，通過文本鏈接顯示/隱藏鼠標上的DIV。在jQuery動畫之前實現短暫停頓

我想在幻燈片發生之前實現一個短暫停頓，這樣如果鼠標飛過菜單鏈接，菜單不會下降。

這是我目前如何激活菜單：

<script type="text/javascript"><!-- 
$('#aboutLink').mouseover(function() {$('#aboutMenu1').slideDown('fast'); 
$('#aboutLink').css("color", "#ff297b");}); 
--></script>

所以實際上我需要做的是在鼠標懸停，等待說300毫秒，那麼，如果鼠標仍然是在鏈接上，做動畫。

來源

2012-05-23 Digital Lightcraft

Duplicate [有沒有辦法在x毫秒後纔對鼠標進行操作，只有在鼠標懸停在它上方時纔會執行操作？]（http://stackoverflow.com/questions/8948648/is-there-a-way-到僅-ACT-上-A-鼠標懸停-後-X-毫秒且僅-IF-它-S）。 –

你可能想要做這樣的事情：

var timeout; 

$('#aboutLink').mouseover(function() { 
    timeout = window.setTimeout(function() { 
     $('#aboutMenu1').slideDown('fast'); 
     $('#aboutLink').css("color", "#ff297b"); 
    }, 300); 
}); 

$('#aboutLink').mouseout(function() { 
    if(timeout) { 
     window.clearTimeout(timeout); 
    } 
});

首先你設置超時，將後執行指定的功能300ms，但是如果用戶離開div，則超時被清除並且什麼都不會發生。

來源

2012-05-23 10:29:38 philgiese

完美！謝謝 - 做得很好 –

不客氣;） – philgiese

我會建議使用hoverIntent：http://cherne.net/brian/resources/jquery.hoverIntent.html

var config = {  
    sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)  
    interval: 200, // number = milliseconds for onMouseOver polling interval  
    timeout: 500, // number = milliseconds delay before onMouseOut  
}; 

$(document).ready(function(){ 
    $('ul#menu > li').hoverIntent(
    // mouseover 
    function(){ 
     $(this).find('>ul').fadeIn('fast'); 
    }, 
    // mouseout 
    function(){ 
     $(this).find('>ul').fadeOut('fast'); 
    } 
); 
});

來源

2012-05-23 10:28:02 Johan

<script type="text/javascript"><!-- 
var timeout; 
var delay = 300; 

$('#aboutLink').hover(function() { 
    timeout = setTimeout(function(){ 
     $('#aboutMenu1').slideDown('fast'); 
    }, delay); 
}, function(){ 
    if(timeout) clearTimeout(timeout); 
}); 
$('#aboutLink').css("color", "#ff297b");}); 
--></script>

來源

2012-05-23 10:28:18 ahren

即使鼠標在300毫秒間隔內被移除，也會始終觸發。 – Johan

@Johan - 是的，我發現後發現錯誤。現在修復。 – ahren

使用window.setTimeout

另外，我建議鼠標事件mouseleave和mouseenter（見http://api.jquery.com/mouseenter/）。節省您處理嵌套元素

的麻煩，那麼你有

var timeoutId; 

$(...).mouseleave(function (ev) { 
    if (timeoutId) { 
     window.clearTimeout(timeoutId); 
    } 
    else { 
     // either remove the menu or set a similar timeout for disappearance 
    } 
}); 

$(...).mouseenter(function (ev) { 
    if (timeoutId) { 
     // clear pending timeouts for other menu items 
     window.clearTimeout(timeoutId); 
    } 
    else { 
     // either remove other menus or transition them out 
    } 

    timeoutId = window.setTimeout(function() { 
     // show menu 
    }, 300); 
});

否則像這樣讓你用一個簡單的邏輯，因爲你一直在尋找在目前的元素。通過清除mouseenter上的任何超時值，您不必照顧其他元素。

你當然可以爲每個單獨的菜單條目設置超時時間，爲你提供更好的轉換。但是你必須管理更多的複雜性。

來源

2012-05-23 10:34:58 skarmats

在jQuery動畫之前實現短暫停頓

回答

相關問題