jquery -fadeIn/fadeOut在滾動時閃爍

我正在使用下面的代碼來實現它的父div的滾動/展開的淡入/淡出效果。jquery -fadeIn/fadeOut在滾動時閃爍

$('.rollover-section').hover(function(){ 
    $('.target', this).stop().fadeIn(250) 
}, function() { 
    $('.target', this).stop().fadeOut(250) 
})

它正常工作時，我翻轉div和出慢慢。但是，如果我快速移動鼠標，然後離開div，它會打破效果。目標div似乎卡在0和1之間的不透明度。

讓我困惑的是，當我使用下面的代碼時，它完美地工作。

$('.rollover-section').hover(function(){ 
    $('.target', this).stop().animate({ 
     opacity: 1 
    }, 250); 
}, function() { 
    $('.target', this).stop().animate({ 
     opacity:0 
    }, 250); 
})

所以，我有兩個問題。

1 - 爲什麼我的第一個代碼塊的行爲像它一樣？

2 - fadeIn（）/ fadeOut（）和動畫不透明度有什麼區別？

來源

2011-08-24 Finnnn

只需使用您在那裏的動畫示例。檢查這裏回答爲什麼：http://stackoverflow.com/questions/5967313/jquery-fade-flickers – Luwe

很酷的感謝。顯示：沒有一點麻煩。我認爲淡入淡出的功能從來不打算用於我希望它們。 – Finnnn

有趣。我不知道jQuery知道發生了什麼，但我肯定可以重現這個問題（[jsFiddle here]（http://jsfiddle.net/gothick/TFhzE/）。） –

我已經把我的答案從這裏的評論：

只需使用你那裏有生命的例子。請點擊此處查看淡出動畫爲何如此表現的答案： jQuery fade flickers

來源

2011-08-24 11:12:44 Luwe

如前所述，這是因爲它們修改了css並將顯示更改爲none。通過使用fadeTo你可以得到相同的效果，但它不會修改css，所以它應該可以正常工作。

更新例如：http://jsfiddle.net/TFhzE/1/

你也可以做

$('.rollover-section').hover(function() { 
    $('.target', this).stop().fadeTo(0,250); 
}, function() { 
    $('.target', this).stop().fadeTo(250,0,function(){$(this).hide();}); 
});

自己完全隱藏它，一旦它實際上是完整的。

來源

2011-08-24 11:14:11 Matt

jquery -fadeIn/fadeOut在滾動時閃爍

回答

相關問題