Einfache Javascript Fading-Effekt nicht in IE7 Arbeits / 8, fein in anderen Browsern

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

  •  19-09-2019
  •  | 
  •  

Frage

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

Ich habe eine einfache Wirkung Verblassen geschrieben, wenn Sie schweben auf einigen Listenelemente über einen Stapel von Bildern positioniert, die alle absolut auf der jeweils anderen positioniert sind. 

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

    });

Allerdings wird es nicht funktioniert im Internet Explorer.

Ich habe versucht, die Suche um, kann aber nicht eine einfache Verblassen Technik finden, die mich lassen; haben einen Stapel von Bildern positionieren, um eine Reihe von Kontrollen (in diesem Fall

  • Elemente) wenn Sie den Mauszeiger über eine bestimmte Steuer eines der Bilder einblendet, die anderen alle versteckt werden soll, sollte die aktuelle blendet.

    IE scheint immer einen Fehler zu haben und nicht richtig verblassen. Weiß jemand, wo ich falsch gehe?

    • War es hilfreich?

    Lösung

    die folgenden Werke für mich (html ändert): 

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

    Andere Tipps

    Ein paar Schüsse in der Dunkelheit, ich bin nach Hause zu Bett gehen jetzt:)

    • Ich weiß aus Prototype, dass die Fade-Effekt bevorzugt einen klassenlosen haben, einfach <div> directrly innerhalb des Elements verblasste werden. Können Sie dies für jedes Bild Versuchen Sie?
    • Was passiert, wenn Sie die Bilder Layout geben (zum Beispiel der zoom: 1 CSS-Eigenschaft verwenden)
    • Was passiert, wenn Sie die Bilder eine Hintergrundfarbe geben.
    Lizenziert unter: CC-BY-SA mit Zuschreibung
    Nicht verbunden mit StackOverflow
    scroll top