IE9上jQuery淡入淡出問題

Question

我正在做一個淡入淡出按鈕與jQuery的。在這裏看到：http://evermight.com/test。

爲什麼懸停狀態在Google Chrome中很好地轉換，但在IE8中不能轉換？在IE8中，單個懸停可能會觸發多個轉換/淡入。我如何強制IE8像谷歌瀏覽器一樣呈現按鈕事件？

Answer 1

使用.stop()和.animate()

$('.btn-rollover .text').hover(

function() { 
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.0}, 500); 
}, function() { 
    $(this).closest('.btn-rollover').find('.overlay').stop().animate({opacity: 0.8}, 500); 
}); 

演示http://jsfiddle.net/tfspz/

Answer 2

使用mouseenter和mouseleave事件而不是mouseover/mouseout。

jQuery(document).ready(function($) { 
    $('.btn-rollover .text').bind('mouseenter', function(){ 
     $(this).closest('.btn-rollover').find('.overlay').stop().fadeOut(); 
    }).bind('mouseleave', function(){ 
     $(this).closest('.btn-rollover').find('.overlay').stop().fadeIn(); 
    }); 

}); 

通知我也是剛動畫調用（.fadeOut()和.fadeIn()）前加入.stop()。這會在調用下一個動畫之前停止當前的動畫。而不是一個接一個排隊動畫，當前正在運行的動畫將被停止，並且新動畫將立即開始。