javascript efeito de esmaecimento simples não está funcionando no IE7 / 8, bem em outros navegadores

Question

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

Eu tenho um simples efeito de desvanecimento escrito quando você passa o mouse sobre alguns elementos da lista posicionados sobre uma pilha de imagens que são todos absolutamente posicionado em cima uns dos outros.

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

    });

No entanto, não irá funcionar no Internet Explorer.

Eu tentei procurar ao redor, mas não consegue encontrar uma técnica de atenuação simples que vai me deixar; tem uma pilha de imagens posicionar um conjunto de controles (neste caso

elementos) quando você passa o mouse sobre um controle específico um dos fades imagens em, os outros devem todos ser escondido, o atual deve desaparecer.

IE sempre parece ter um erro e não desaparecer corretamente. Alguém sabe onde eu estou indo errado?

Answer 1

As seguintes obras para mim (html muda):

<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

Alguns tiros no escuro, eu vou para casa dormir agora:)

• Eu sei da Prototype que o efeito de fade prefere ter um sem classes, simples <div> directrly dentro do elemento a ser desbotada. Você pode tentar adicionar esta a cada imagem?
• O que acontece se você der o layout de imagens (por exemplo, usando a propriedade zoom: 1 CSS)
• O que acontece se você dá às imagens uma cor de fundo.