Simple efecto de desvanecimiento Javascript no funciona en IE7 / 8, bien en otros navegadores

Question

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

He escrito un simple efecto de desvanecimiento cuando se pasa sobre algunos elementos de la lista colocados sobre una pila de imágenes que se colocan todos absolutamente una encima de la otra.

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

    });

Sin embargo, no funcionará en Internet Explorer.

He intentado buscar alrededor, pero no puedo encontrar una técnica simple que desvanecimiento me deja; tener una pila de imágenes posicionar un conjunto de controles (en este caso

elementos) cuando se pasa sobre un control en particular una de las imágenes se desvanece en, los demás deben ser escondidos todo, el actual debe desaparecer.

IE siempre parece tener un error y no se apaga correctamente. ¿Alguien sabe dónde voy mal?

Answer 1

las siguientes obras para mí (cambios 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

A los pocos disparos en la oscuridad, me voy a casa a la cama ahora:)

• Sé por Prototipo que el efecto de fundido prefiere tener un <div> sin clases, simple directrly en el interior del elemento que se desvaneció. Se puede tratar de añadir esto a cada imagen?
• ¿Qué pasa si se le da la disposición de imágenes (por ejemplo, mediante la propiedad zoom: 1 CSS)
• ¿Qué pasa si se le da a la imagen un color de fondo.