jquery懸停問題

當用戶將鼠標懸停在導航菜單上的按鈕（#home，＃）上時，我正試圖將網站徽標（logoName.png）更改爲其他圖像（logoHome.png，logoEvents.png等）事件等）與下面的腳本。當時間設置爲0並且所有事情都是瞬間發生的時候，這可以正常工作，但是當我放慢速度時，它並沒有達到我想要的效果。jquery懸停問題

如果用戶在懸停動畫完成之前將鼠標移離按鈕，則它不會恢復到徽標，並且如果用戶直接在不同的導航按鈕之間移動，則會顯示徽標而不是導航鼠標現在在按鈕上的圖像。

我試過使用懸停，mouseenter/leave和mouseover/out無濟於事。有什麼方法可以更好地處理隊列嗎？或者我應該試試hoverIntent嗎？

所有建議表示讚賞 - 我是新來的這一切！謝謝。

$('#home').hover(function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image 
     }); 
}, function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back 
     }); 
}); 

$('#events').hover(function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr ('src', 'images/logoEvents.png').fadeIn(500); //swaps logo for events image 
     }); 
}, function() { 
    $('#logo').hide(
     500, 
     function() { 
      $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back 
     }); 
});

編輯： - 工作版本的人誰的興趣：

$('#home').hover(function() { 
    $('#logo').stop(true, true).fadeOut(
     500, 
     function() { 
      $('#logo').attr ('src', 'images/logoHome.png').fadeIn(500); // swaps logo for home image 
     }); 
    }, function() { 
$('#logo').stop(true, true).fadeOut(
    500, 
    function() { 
     $('#logo').attr('src', 'images/logoName.png').fadeIn(500); //swaps back 
    }); 
});

等

感謝您的幫助。

來源

2010-01-20 Mike

這是一個重複的（它相當經常出現）。例如（和答案！）請參閱：http://stackoverflow.com/questions/2009151/jquery-hover-event-not-working-properly/2009198#2009198。 – 2010-01-20 21:38:42

謝謝 - 我在發佈之前瀏覽了一下但未遇到此問題。 – Mike 2010-01-20 22:34:39

萬一任何人讀到這一點：嘗試使用.prop而不是.attr ;-) – juFo 2016-12-07 07:30:17

你有沒有嘗試過沒有回調？

$('#home').hover(function() { 
    $('#logo').fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500); 
}, function() { 
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
}); 

$('#events').hover(function() { 
    $('#logo').fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500); 
}, function() { 
    $('#logo').fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
});

另一種選擇是新的jQuery功能.clearQueue()

來源

2010-01-20 21:36:01 munch

感謝您的建議，但沒有回調它改變圖像之前，它做了第一個fadeOut。現在解決使用.stop（）和.clearQueue（）似乎也可以工作。 jquery網站上說.stop（）僅用於動畫，而.clearQueue（）更通用，所以看到我有動畫和源代碼更改後，.clearQueue（）會更「正確」嗎？ – Mike 2010-01-20 22:27:35

這裏沒有真正的「更多」正確。這取決於你想要做什麼。 'stop（）'會暫停當前動畫。 'clearQueue（）'和'stop（true，true）'會做同樣的事情並從隊列中移除所有元素。 '這更多是一個偏好的問題，所以如果你使用停止，只需停下來。 – munch 2010-01-20 23:08:20

嘗試使用.stop（）方法來中斷之前的寬鬆

$('#home').hover(function() { 
    $('#logo').stop().fadeOut(500).attr ('src', 'images/logoHome.png').fadeIn(500); 
}, function() { 
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
}); 

$('#events').hover(function() { 
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoEvents.png').fadeIn(500); 
}, function() { 
    $('#logo').stop().fadeOut(500).attr('src', 'images/logoName.png').fadeIn(500); 
});

來源

2010-01-20 21:36:19 vitto

謝謝 - .stop（）似乎有訣竅，但爲了獲得正確的源代碼更改和淡入仍然需要在回調函數中。 – Mike 2010-01-20 22:29:44

jquery懸停問題

回答

相關問題