Erstellen Sie ein Div, das exakt die Größe des Bildes hat. Dieses Div erhält ein Hintergrundbild des zweiten Bildes. Fügen Sie dann ein Inline-Bild darin ein.
<div id="kitten" style="background-image: url(dog.jpg);">
<img src="/images/kitten.jpg" alt="Kitten" />
</div>Das Ein- und Ausblenden des Inline-Bildes enthüllt/versteckt das zweite (Hintergrund-)Bild.
$("#kitten").hover(function(){
$(this).find("img").fadeOut();
}, function() {
$(this).find("img").fadeIn();
});
schöner Effekt, danke fürs Teilen.
fadeIn() wird erst aufgerufen, nachdem fadeOut zurückgekehrt ist, sodass trotz Einfachheit visuell viel Raum für Verbesserungen bleibt.
Das ist schrecklich. Es blendet das erste aus und DANN blendet es das andere ein.
Sie tun nicht, was Sie sagen: ein Bild in ein anderes einblenden.
Haben Sie den Beitrag überhaupt gelesen? Das enthaltende DIV hat ein Hintergrundbild, das dem zweiten Bild entspricht. Wenn Sie mit der Maus über das IMG-Element fahren, wird es ausgeblendet, und das 2. Bild (in Form des Container-DIVs und seines BG-Bildes) wird angezeigt. Wenn Sie die Maus wegziehen, wird das IMG wieder eingeblendet, verdeckt das Container-DIV-Hintergrundbild und zeigt wieder das erste Bild (IMG-Element) an.
Alles, was Sie tun müssen, ist den Befehl wiederholen, um zum Anfang zurückzukehren. Die Person ist nett genug, Dinge zu posten. Ernsthaft.
Vielen Dank
Danke, es ist sehr nützlich
Es funktioniert nicht, kann mir jemand helfen?
und ich möchte etwas Ähnliches wie das, was Sie auf den „PROPS“ auf dieser Seite tun... Danke
Cool :)
Das werde ich auf meiner Website verwenden, danke :)
Ashley
Es ist erwähnenswert, dass bei der Verwendung von
.fadeOut()und.fadeIn()das Element aufdisplay: none;gesetzt wird, wodurch seine Dimensionen verloren gehen. Es lohnt sich, nur die Deckkraft zu ändern, wenn Sie es ausblenden.$("#kitten").hover(function(){$(this).find("img").animate({opacity: 0}, 500);
}, function() {
$(this).find("img").animate({opacity: 1}, 500);
});
Oder Sie können die Eigenschaft visibility: hidden; animieren, die weiterhin den Platz einnimmt, den das Element zuvor eingenommen hat, während es versteckt bleibt.
Das ist es, was ich brauchte... außer dass es auf mehreren Bildern funktionieren musste, also konnte ich keine ID verwenden, und das
divdurfte nicht verschwinden, wenn die Maus darüber fuhr. Mit Hilfe von @visualidiot auf Forrst wurde diese Lösung ausgearbeitet<div class="fade">
<img src="/images/kitten.jpg" alt="Kitten" />
</div>
$(".fade").hover(function(){
$(this).find("img").stop(true,true).animate({opacity: 0}, 400);
}, function() {
$(this).find("img").stop(true,true).animate({opacity: 1}, 400);
});
Um die Überblendzeit zu erhöhen oder zu verringern, passen Sie 400 an den für Sie passenden Wert an (höher ist länger, niedriger ist schneller).
Ich verwende für denselben Effekt auf meiner Website http://www.prefektesfest.at etwas Komplexeres. Schauen Sie sich den jQuery-Code unten an, da er mit vielen Bildern einwandfrei funktioniert.
Ich kann das bei mir nicht zum Laufen bringen.
Ich sehe das Hintergrundbild und einen Art Verblassungsrand, aber mein Hauptbild wird als kaputter Link angezeigt.
Sehr gut gemacht :D
Aber... es funktioniert nicht, bitte helfen Sie mir, hier ist mein Code
$(“#kitten”).hover(function(){
$(this).find(“img”).fadeOut();
}, function() {
$(this).find(“img”).fadeIn();
});
Wow! Genau das habe ich gesucht! Danke!
Kurz und bündig. Genau so, wie Snippets sein sollten. Danke!
Warum nicht einfach in einer Zeile das erste Bild ausblenden und in der nächsten Zeile das zweite Bild einblenden? So geschieht das Ein- und Ausblenden gleichzeitig, ohne den Hintergrundtrick?
Kurz und bündig. Genau so, wie Snippets sein sollten. Danke!
Sehr interessanter Effekt, aber Vorsicht bei den CPU-Ressourcen.
Das Wichtigste ist, welches Bild ausblenden und welches einblenden soll.