Jquery 圖像淡出

Question

我正在使用這個 jquery 來嘗試淡出我的圖像並顯示下面的內容。 它可以完美運行，除非您將 hover 乘以它。 然后它嚇壞了，開始一遍又一遍地進進出出。 有什么我可以做的嗎？

$('#contentPosters li').hover(function(){
    $(this).find('img').fadeOut();
}, 
function(){
    $(this).find('img').fadeIn();
});

Answer 1

是的。 在 animation function 之前添加“stop()”。

$('#contentPosters li').hover(function(){
    $(this).find('img').stop().fadeOut();
}, 
function(){
    $(this).find('img').stop().fadeIn();
});

好的，上面在技術上可以工作，但我認為更好的工作方式是。

var delay = 200;
$('#contentPosters li').hover(function(){
    $(this).find('img').dequeue().fadeTo(delay,0);
}, 
function(){
    $(this).find('img').dequeue().fadeTo(delay,1);
});

Answer 2

$('#contentPosters li').hover(function(){
    $(this).find('img').stop().fadeTo('fast',0);
}, 
function(){
    $(this).find('img').stop().fadeTo('fast',1);
});

使用stop()和fadeTo

stop()用於停止當前 animation。

fadeTo()的使用是因為當您在fadeIn / fadeOut期間停止 animation 時，不透明度不會重置為 100%，並且您的圖像將隨着時間的推移變得不可見。

Answer 3

嘗試使用.fadeToggle('fast')，它涵蓋了所有的問題。

看起來 stop() 不適用於 default.fadeToggle，因為它會在不透明度進行到一半時停止 animation。

$('#contentPosters li').hover(function(e) {
    $(this).find('img').stop().fadeTo(200,'mouseleave'==e.type)
});

http://jsfiddle.net/rkw79/w2vus/

編輯：新小提琴現在可以使用

最新更新：這是最干凈的解決方案

http://jsfiddle.net/rkw79/xBtpC/

$('#contentPosters li').hover(function(e) {
  $(this).find('img').stop(true,true).fadeToggle('fast');
});