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

Question

See http://jonesonter.notomato.com.au/ .

I have a simple fading effect written when you hover on some list elements positioned over a stack of images which are all absolutely positioned on top of each other.

$("#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");

    });

However it won't work in internet explorer.

I have tried searching around, but can't find a simple fading technique that will let me; have a stack of images position a set of controls (in this case < li> elements) when you hover over a particular control one of the images fades in, the others should all be hidden, the current one should fade out.

IE always seems to have an error and not fade properly. Does anyone know where I am going wrong?

Answer 1

A few shots in the dark, I am going home to bed now :)

• I know from Prototype that the fade effect prefers to have a classless, simple <div> directrly inside the element to be faded. Can you try adding this to each image?
• What happens if you give the images layout (eg using the zoom: 1 CSS property)
• What happens if you give the images a background color.

Answer 2

the following works for me (html changes):

<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>