jQuery FadeOut在錯誤的時間發生

Question

我有以下代碼：

$(document).ready(function () {

$("#full-btns").children().delay(4000).fadeOut("slow");

$('#full-btns').hover(function() {
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() {
        $("#full-btns").children().fadeOut("slow");

});

加載頁面后， #full-btns元素會在淡出之前顯示4000毫秒。 我遇到的問題是，如果用戶將鼠標懸停在#full-btns元素上而仍可見時，它會使其淡出，因為$("#full-btns").children().fadeOut("slow"); 在懸停時被調用。 我希望將#full-btns懸停在其上方時始終可見。

頁面加載后，將鼠標懸停在紅色div上方，請注意頁面淡出的方式。 那是不可取的。 將鼠標懸停在紅色div上（當其可見時）應保持可見

更新： http : //jsfiddle.net/gazedge/nhBBc/ （現在包括解決方案）

Answer 1

如果我沒有誤解這個問題，您能否就return false; 在您的懸停通話結束時，以防止事件冒泡？

http://www.quirksmode.org/js/events_order.html
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

Answer 2

使用setInterval和clearInterval;

$('#full-btns').hover(function() {

      clearInterval(refreshIntervalId);        
      $('#full-btns').children().stop().animate({opacity:'100'});
      $('#full-btns').children().show();

}, function() { 
        $("#full-btns").children().fadeOut("slow");            
});

var refreshIntervalId = setInterval(function() {
     $("#full-btns").children().fadeOut("slow");
}, 4000);

Answer 3

您唯一要做的就是在任何人徘徊之前清除所有動畫。

$("#full-btns").children().delay(4000).fadeOut("slow");

    $('#full-btns').hover(function() {
        $('#full-btns').children().stop(true, true);  // Stop the fade-out animation
          $('#full-btns').children().stop().animate({opacity:'100'});
          $('#full-btns').children().show();

    }, function() {
        console.log('fadeOout called');
            $("#full-btns").children().fadeOut("slow"); 


    });​

http://jsfiddle.net/nhBBc/5/

注意：第一次將鼠標懸停在div中（在代碼中）時，div消失不是因為$（“＃full-btns”）。children（）。fadeOut（“ slow”）;。 但由於它只是完成了您已應用的較早動畫。 [您的第一行]。