jQuery淡入淡出Div - IE7 bug

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

- user1058223

---

如果有人正在使用IE7，这里提供一个fiddle：http://jsfiddle.net/KMmSB/5/。 - Irvin Dominin

编辑帖子。尝试移除过滤器。 - craniumonempty

瞎猜一下，但是既然“content”似乎可以工作而按钮不行，那么尝试删除破折号“-”以查看是否存在问题。可能不是这个原因，但我回想起了旧版Netscape下划线的问题。 - craniumonempty

哦，我刚刚看到了。你在原帖中没有提到PNG。我在最后的代码中添加了一个延迟，但是网上有关它的问题，有人建议将图像放入容器中并淡化容器。延迟是为了alpha通道，因为显然当它工作时看起来很糟糕。你可能需要尝试一下。..我认为过滤器行也可能需要更改。 - craniumonempty

Answer 1

我通过直接使用fadeToggle()修复了这个问题，而不是在<div id=nav-buttons>上操作。以下是我的解决方法：

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

- user1058223

Answer 2

在IE7中，fadeToggle存在缺陷！如果你设法让它工作，你会发现当你淡入或淡出时，IE7会对这个字体进行一些奇怪的反锯齿处理...非常丑陋。

尝试使用颜色动画（如果可能的话，因为背景原因），或者尝试使用.fadeIn()和.fadeOut()代替。

- ggzone

Answer 3

没有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上时淡出。

编辑2：既然你想要出现和消失，也许可以这样：

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

如果你想改成fadeToggle，我建议在调用它时删除display:none，否则它会一直超出屏幕。然后当你离开时可以把它放回去。

编辑3：根据链接尝试： 使用jQuery时Internet Explorer 7中的淡入淡出问题

$(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。

- craniumonempty

---

非常奇怪。我删除了display:none并切换到你的jquery...问题依旧。它像我的代码一样完美地隐藏和显示，但仍然没有动画（透明度）。我在FF中尝试了你的代码和我的代码，都可以很好地淡入淡出。还有其他想法吗？ - user1058223

我刚试了一下，在IE9中没有过滤器可以正常工作，但是在我的FF中却出现了问题。如果它能够正常工作，你可能需要进行浏览器检查。 - craniumonempty

没有效果 :( 它只是像 .show() 或 .hide() 一样隐藏和显示。我猜我的用户不会得到任何华丽的动画。奇怪的是，我能够渐入和渐出 #contents div。我想知道这是否与左侧按钮和右侧按钮上的 PNG 图像背景有关。我知道 IE 在过去对 PNG 图像有些问题。 - user1058223