简单的javascript褪色效果在IE7 / 8中不起作用，在其他浏览器中效果很好

Question

参见http://jonesonter.notomato.com.au/ 。

当您将鼠标悬停在位于一堆图像上的某些列表元素上时，我会写出一个简单的淡入淡出效果，这些图像都绝对位于彼此的顶部。

$("#homeNav li").hover(function(){
    //make a variable and assign the hovered id to it
    var elid = $(this).attr('id');
    //hide the image currently there
    $("div#homeImages div").hide();
    //fade in the image with the same id as the selected buttom
    $("div#homeImages div#" + elid + "").fadeIn("slow");

    });

但是，它在Internet Explorer中不起作用。

我已经尝试过搜索，但是找不到一种简单的淡入淡出的技术。 将一堆图像放置在一组控件（在本例中为<li>元素）上，当您将鼠标悬停在特定控件上时，其中一个图像会淡入，其他图像都应隐藏，而当前图像应淡出。

IE似乎总是有错误并且不能正确消失。 有人知道我要去哪里错吗？

Answer 1

在黑暗中拍了几枪，我现在要回家睡觉了:)

• 我从Prototype得知，淡入淡出效果更倾向于在要淡入淡入的元素内部直接具有无类，简单的<div> 。 您可以尝试将其添加到每个图像吗？
• 如果给图像布局（例如，使用zoom: 1 CSS属性）会发生什么？
• 如果给图像提供背景色会发生什么。

Answer 2

以下对我有用（更改html）：

<div id="homeImages">
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/conditioned.jpg');" id="homeConditioned"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/guided.jpg');" id="homeGuided"></div>
    <div style="display: block; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/informed.jpg');" id="homeInformed"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/shaped.jpg');" id="homeShaped"></div>
    <div style="display: none; width:950px; height:500px; background:url('http://jonesonter.notomato.com.au/wp-content/themes/jonesonter/img/home-page/sustained.jpg');" id="homeSustained"></div>
</div>