Ich quetsche wirklich meinen Kopf, damit das einfache Ein- und Ausblenden des Hintergrundbildes nur mit Javascript ohne JQuery und CSS3 funktioniert. Ich weiß, wie einfach es ist, in Jquery ein fadeIn () und fadeOut () aufzurufen. Leider in meinem Projekt arbeite ich nicht, sie unterstützen Jquery nicht. Ich möchte die Animation von IE6 für Ihre Informationen unterstützen.
Beim Klick auf die Links wird der entsprechende Hintergrund des divs eingeblendet, der vom zuvor vorhandenen Hintergrund ein- und ausgeblendet werden soll. Ich versuche, es basierend auf setinterval arbeiten zu lassen, konnte es aber nicht tun.
%Vor%
getElementById gibt Ihnen ein Element (oder null), getElementsByClassName gibt ein Array.
Sie scheinen auf die Verwendung von IDs zu zielen, also sollte dies Ihren Bedürfnissen entsprechen. Ich habe die ganze Sache aktualisiert: IDs
Sie sollten jedoch erkennen, dass diese Methode des Verblassens sehr viel kostspieliger ist als die Verwendung beschleunigter GPU-Übergänge.
Aktualisieren
JSfiddle webkit opacity ausblenden
Hier sind meine vollständigen Implementierungen von fadeIn und fadeOut für die browserübergreifende Unterstützung (einschließlich IE6), die jQuery oder eine andere JS-Bibliothek eines Drittanbieters nicht benötigt:
%Vor%Wie andere bereits gesagt haben, müssen Sie Ihren handleClick korrigieren, um ein einzelnes Element richtig auszuwählen, und dann dieses Element an die Fade-Funktion übergeben (die ich zur besseren Übersichtlichkeit fadeOut genannt habe). Die Standardzeit für eine jQuery-Überblendung beträgt 400 ms. Wenn Sie dies also nachahmen möchten, könnte Ihr Aufruf wie folgt aussehen:
%Vor% element.style ist nicht definiert, weil Sie nicht auf das richtige Objekt verweisen. Verwenden Sie element[0] für Ihren Funktionsaufruf:
Sie sollten dies wirklich über CSS3 tun, da alle modernen Browser dies unterstützen, und für ältere Browser die Verwendung von show / hide. Tun Sie dies, indem Sie eine Klasse "fadeOut" hinzufügen oder über JavaScript entfernen. CSS3 (Übergänge) behandelt alles andere, einschließlich des Ausblendens und Anzeigens für ältere Browser.
Denken Sie daran: Machen Sie so viel wie möglich in CSS, bevor Sie sie in JavaScript ausführen. Es ist nicht nur sauberer und einfacher zu pflegen, aber CSS3-Animationen werden runder, da es oft die GPU (Grafikkarte) und nicht nur die CPU härtet. Dies ist besonders wichtig auf mobilen Geräten, aber ist die standardmäßige, moderne Art, dies in jedem Gerät zu tun.
Sehen Sie diesen Opera Artikel für mehr Details: Ссылка
Ich werde Sie in die richtige Richtung weisen und den Rest der Programmierung Ihnen überlassen.
So funktioniert die Funktion setInterval (). Es dauert eine Funktion auszuführen und dann die Millisekunden, für die es ausgeführt werden sollte.
%Vor%Ich habe eine JS-Geige für euch gemacht hier Es ist unvollständig, aber zeigt an, wie man das Ein- / Ausblenden machen sollte. Dies wird in Chrome auf einem Mac getestet. Nicht sicher über FF oder IE leider.
Ebenso wie einige darauf hingewiesen haben, können Sie 100% sicher sein, dass Sie ein Array mit Elementen erhalten und somit auf das gewünschte Element als solches verweisen müssen, wenn Sie Objekte von einer Funktion erhalten, die mit s endet. In Ihrem Fall ist element[0] .
Ich hoffe, ich helfe dir ein wenig weiter! :) Viel Glück!
Tags und Links javascript