IE8のjQueryでフェードインとフェードアウトの問題

Question

jqueryでボタンをフェードインしてフェードアウトしています。それを参照してください：http://evermight.com/test。

どのようにホバー状態はGoogle Chromeではうまく移行しますが、IE8ではうまくいかないのですか？ IE8では、単一のホバーが複数のトランジション/フェードを引き起こす可能性があります。 IE8でGoogle Chromeのようにボタンイベントを強制的にレンダリングするにはどうすればよいですか？

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

mouseover/mouseoutではなく、mouseenterとmouseleaveイベントを使用してください。

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()を追加しました。これにより、次のアニメーションを呼び出す前に現在のアニメーションが停止します。アニメーションを次々にキューイングするのではなく、現在実行中のアニメーションが停止され、新しいアニメーションがすぐに開始されます。