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();
    });

});

注意我在动画调用之前添加了.stop()（.fadeOut()和.fadeIn()）。这将在调用下一个动画之前停止当前动画。而不是一个接一个地排队动画，当前正在运行的动画将被停止，新的动画将立即开始。

在IE8上使用jQuery淡入淡出问题

2 个答案: