javascript simple effet de fondu ne fonctionne pas dans IE7 / 8, bien dans d'autres navigateurs

StackOverflow https://stackoverflow.com/questions/1904826

  •  19-09-2019
  •  | 
  •  

Question

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

J'ai simple effet de fondu écrit lorsque vous passez la souris sur certains éléments de la liste positionnés sur une pile d'images qui sont tous en position absolue sur le dessus de l'autre. 

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

    });

Cependant, il ne fonctionnera pas dans l'explorateur Internet.

J'ai essayé autour de la recherche, mais ne peut pas trouver une technique simple de fading qui me permettra; une pile d'images positionner un ensemble de commandes (dans ce cas

  • éléments) lorsque vous passez la souris sur un contrôle particulier l'une des images apparaît en fondu, les autres devraient tous être cachés, l'actuel doit disparaître.

    IE semble toujours avoir une erreur et ne se décolore pas correctement. Est-ce que quelqu'un sait où je me trompe?

    • Était-ce utile?

    La solution

    les œuvres suivantes pour moi (changement 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>

    Autres conseils

    Quelques coups de feu dans l'obscurité, je vais me coucher maintenant:)

    • Je sais que du prototype que l'effet de fondu préfère avoir une sans classes, <div> simples directrly dans l'élément à fanée. Pouvez-vous essayer d'ajouter ceci à chaque image?
    • Qu'est-ce qui se passe si vous donnez la mise en page des images (par exemple en utilisant la propriété CSS zoom: 1)
    • Qu'est-ce qui se passe si vous donnez les images une couleur d'arrière-plan.
    Licencié sous: CC-BY-SA avec attribution
    Non affilié à StackOverflow
    scroll top