Question

我有一个div，它会在FF中悬停淡入淡出，但在IE7中它只是隐藏并显示没有动画。这是我的代码：

#nav-buttons {
    display:none;
    width:894px;
    position:relative;
    z-index:1000;
}
#left-button, #right-button {
position:absolute;
width:46px;
height:76px;        
}
#left-button {
background:url("images/arrows.png") no-repeat scroll -88px -60px transparent;
left:-46px;
}
#left-button:hover {
background-position:-88px -260px;
}
#right-button {
background:url("images/arrows.png") no-repeat scroll 3px -60px transparent;
right:-43px;
}
#right-button:hover {
background-position:4px -260px;
}


----------
<div id="contents">
<div id="nav-buttons">
    <a href="javascript:void(0)" id="left-button"></a>
    <a href="javascript:void(0)" id="right-button"></a>
</div>
 other html....
</div>

----------

$(document).ready(function() {                  
    $("#contents").hover(function() {
        $("#nav-buttons").fadeToggle("slow");
    });
});

Answer 1

我能够通过fadeToggle（）直接解决这个问题，而不是<div id=nav-buttons>这就是我所做的：

$(document).ready(function() {                  
   $("#contents").hover(function() {
      $("#left-button").fadeToggle("slow");
      $("#right-button").fadeToggle("slow");
   });
 });

Answer 2

没有IE7，但也许现在尝试一下。不修复，但在需要显示内容时显示内容......好吧，在IE7上不确定，但与IE9有类似的问题。

$(document).ready(function(){                  
    $("#contents").hover( function() {
        $("#nav-buttons").fadeToggle("slow").queue(function() {
            $(this).fadeIn("slow");
            $(this).dequeue();
          });
    });
});

另外，也许摆脱“display：none;”，因为它表现得很奇怪......或者你想要那个？

编辑：我发现它可能只是在队列函数中重新添加fadeToggle。啊，当你将鼠标悬停在其他东西上时，你想要显示一些东西。我现在明白了。也许只是在队列中添加另一个fadeToggle，或者当鼠标不再在div上时淡出。

edit2：看到你想要出现和消失，也许这就是：

$(document).ready(function(){                  
    $("#contents").mouseenter( function() {
        $("#nav-buttons").fadeIn("slow");
    }).mouseleave( function() {
        $("#nav-buttons").fadeOut("slow");
    });       
});

如果您想要更改为fadeToggle，我建议您在调用时删除display：none，否则它将继续关闭屏幕。然后你可以在你离开时把它放回去。

Edit3：根据链接尝试：

Fading issues in Internet Explorer 7 when using jQuery

$(document).ready(function(){                  
    $("#contents")
        .mouseenter( function() {
            $("#nav-buttons").delay(200).fadeIn(function(){
              $(this).css("filter",'');
            });
        })
        .mouseleave( function() {
            $("#nav-buttons").delay(200).fadeOut(function(){
              $(this).css("filter",'');
            });
        });
});

如果这不起作用，你可能不得不使用直接css。

Answer 3

fadeToggle是IE7中的Buggy！如果你以某种方式让它工作，你也会看到你是否褪色字体IE7会在进入或离开时对这种字体做出一些奇怪的抗锯齿......非常难看。

使用颜色动画（如果可能，因为背景）或尝试使用.fadeIn（）和.fadeOut（）

jQuery FadeIn，FadeOut Div - IE7错误

3 个答案: