简单的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");

    });

但是它不会的工作在互联网浏览器。

我已经尝试过寻找，但是不能找到一个简单的衰落的技术，这将让我；有一堆图像 位置的控制(在这种情况下 < 李>元) 当你停留在一个特定的控制 其中一个图像消失，其他人都应该是隐蔽的，当一个应该淡出。

即似乎总有一个错误和不褪色的正常。任何人都不会知道我在哪里错了吗？

Answer 1

以下对我的作品(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>

Answer 2

拍了几张照片在黑暗中，我要回家睡觉了:)

• 我知道从原型，淡效果更喜欢有一个没有阶级、简单 <div> directrly内部元件逐渐消失。你可以尝试加入这对每一个图像?
• 会发生什么，如果你给的图片布局(例如使用 zoom: 1 CSS酒店)
• 会发生什么，如果你给的图象背景的颜色。