Wie hinzufügen von fading-oder image-transition effect mithilfe von JQuery?
Habe ich nur eine <img>
element auf meiner Seite. Ich ändere die src
- Attribut dieses Bild alle 7 Sekunden.
Sehe ich die neuen Bilder alle 7 Sekunden, aber es wäre schöner, wenn ich kann hinzufügen, einige verblassen oder übergänge-Effekt beim laden neue Bild.
Einige haben einfache Skript dafür?
Ich brauche kein plugin. Brauchen nur etwas Ahnung hat oder ein paar Zeilen der Beispiel-es auch zu tun.
InformationsquelleAutor kheya | 2011-01-31
Du musst angemeldet sein, um einen Kommentar abzugeben.
Trotz allem, was KaiQing erwähnt, können Sie die Rückrufe Fähigkeit von jQuery, fade in/out das Bild, während Sie es zu ändern. Diese kann getan werden, etwa so: http://www.jsfiddle.net/bradchristie/HsKpq/1/
Ich habe es versucht. Es wirkt dem verblassen aber das fading ist etwas zu lang. Ich sehe ganze Fläche bekommt weißlich für einen kurzen moment (Bruchteil einer sec). Dann lädt neues Bild. Sieht etwas hässlich. Ich habe gesehen, andere Menschen tut es gut wo-Bild übergang geschieht bei sehr schnell.
Ich habe versucht "schnell". Nicht viel Unterschied.
Versuchen Sie, diese für Größe: jsfiddle.net/bradchristie/HsKpq/2
Ich bin zufrieden mit .fadeTo('fast', 0.7, function () { $(this).attr('src', '..').fadeTo('slow', 1); });
InformationsquelleAutor Brad Christie
Werden Sie möchten zwei Bilder:
Set
#backImg
hinter#frontImg
etwa so:Dann, in Ihrem code, der feuert alle 7 Sekunden, fadeOut-der front-Bild... dadurch wird automatisch machen Sie Ihre crossfade-Effekt, da die Rückseite Bild bereits geladen ist dahinter. Wenn der fade ist fertig, die Quelle von der Vorderseite Bild auf der Rückseite Bild 'src', zeigen es, und pre-load das nächste Bild in der Rückseite Bild:
Diese übernimmt alle Ihre Bilder sind identisch dimensioniert. Wenn nicht, werden Sie wollen nur ein bisschen aufwendiger mit dem css und wickeln Sie die Bilder in divs, fade out.
InformationsquelleAutor gilly3
Können Sie nicht tun dies mit nur einem Bild.
Check this out:
Das blendet völlig aus und ein. Ich dachte, er wurde gefragt, übergangszeit für die fx - überblendungen oder so.
Alles was ich wollte, war: wenn ein neues Bild geladen wird, möchte ich ausblenden, das ältere Bild mit einem fading-Effekt und laden Sie das neue Bild mit einem fading-Effekt. Diese Weise Benutzer nicht sehen, eine plötzliche Veränderung des Bildes. Sorry, wenn ich war nicht klar genug.
Macht Sinn. Nur stellen Sie sicher Sie definieren die Abmessungen der container für das Bild oder es werden sich verschieben, das layout der Website bei der fadeOut rundet. Ich bin nur zufällig zu tun, diese Sache sehr, wenn ich sah diesen Beitrag, außer der Kunde gebeten, für überblendungen.
Für was es Wert ist, alle Seiten sollten die width/height-Attribute. Auch wenn Sie optional ist, ist es gute Praxis, um Sie zu geben, Ihr browser eine Pause, die beim Rendern der Seite während der Wartezeit auf den Inhalt (ebenso, so dass es nicht ruinieren design soll die Inhalte verloren gehen).
InformationsquelleAutor Kai Qing