Übergang von Weiß auf Weiß zwischen zwei Bildern

Question

Ich versuche einen Übergangseffekt zwischen dem Moment zu erstellen, in dem ein Bild gelöscht und ein neues Bild angezeigt wird.

Ich habe ein Bild <img src="..."/> in einem div, und irgendwann in meinem Skript Javascript löscht dieses Bild und ersetzt es durch ein anderes. Meine JS das Bild zu ersetzen ist:

document.getElementById("avatar-drop").innerHTML = '<img src="/core/script/blueimp/server/php/files/'+file.name+'" width="150" height="150" alt=""/>'; 

Und hier ist das, was mein div mit einem Bild wie folgt aussieht:

.avatar { 
 
\t width: 152px; 
 
\t height: 152px; 
 
\t border: 1px solid #888; 
 
\t border-radius: 50%; 
 
\t overflow: hidden; 
 
\t margin: 0; 
 
}

<div id="avatar-drop" class="avatar"> 
 
\t <img src="https://tracker.moodle.org/secure/attachment/30912/f3.png" width="150" height="150" alt=""/> 
 
</div>

Ich mag gerne wissen, ob es Art und Weise ist, mit JS oder CSS, um eine Überblendung zwischen weißem und neuem Bild zu erhalten. Ich dachte über die css opacity -Eigenschaft nach, aber ich brauche die Ränder meines div, um sichtbar zu bleiben (nur der Inhalt/das Bild würde zu weiß verblassen).

Gibt es einen Weg, dies zu erreichen?

Answer 1

könnten Sie fadeIn und fadeOut jQuery-Technik verwenden, um diesen Effekt zu erstellen. Das neue Bild kann dann durch die

Skript hinzugefügt werden

$(document).ready(function() { 
 
    $('#button').click(function() { 
 
    $('div img').fadeOut("slow", function() {/*fade out old image*/ 
 
     $('div').append('<img src="http://placehold.it/500/500"/>'); /*Add image*/ 
 
     $('div img').hide().fadeIn("slow"); 
 
     $('div img:first-child').remove();/*remove old image now*/ 
 
    }); 
 
    }); 
 
});

div { 
 
    border-radius: 50%; 
 
    height: 200px; 
 
    width: 200px; 
 
    position: relative; 
 
    border: 10px solid tomato; 
 
    overflow: hidden; 
 
    box-sizing:border-box; 
 
} 
 
div img { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img src="https://tracker.moodle.org/secure/attachment/30912/f3.png" /> 
 

 
</div> 
 
<button id="button">Change Image!</button>

Answer 2

Sie können die Opazität Technik tun, aber Sie haben ein Zwischenelement zu schaffen, so dass Sie nicht über die Grenze auf die Änderung Opazität verlieren:

<div id="avatar-drop" class="avatar"> 
    <div class="avatar-wrapper"> 
      <img src="https://tracker.moodle.org/secure/attachment/30912/f3.png" width="150" height="150" alt=""/> 
    </div> 
</div> 

Und dann die Opazität ändern auf .avatar-wrapper

EDIT Demo - https://jsfiddle.net/7ugc6va1/50/