JS: Set Animationsdauer für die Änderung der src

Question

ich das Skript für die Änderung img bin mit auf Klick-Funktion

var fstSrc = 'img/1.jpg'; 
    var sndSrc = 'img/2.jpg'; 
    var trdSrc = 'img/3.jpg'; 
    $(".aktualita1").click(function() { 
     $('img[src="' + sndSrc + '"]').attr('src', fstSrc); 
     $('img[src="' + trdSrc + '"]').attr('src', fstSrc); 
    }); 

Wenn klicken, Bild immidiately ändert, natürlich. Wie kann ich eine Dauer von 0,5 Sekunden für diesen Klick festlegen, sodass sich die Bilder mit einer schönen Fade-Animation ändern? :) Vielen Dank!

Answer 1

Sie können fadeOut ändern die src des Bildes und dann fadeIn geben Ihnen den gewünschten Effekt. mit einem anderen Bildelement oben auf, dass ein (oder umgekehrt)

var fstSrc = 'img/1.jpg'; 
var sndSrc = 'img/2.jpg'; 
var trdSrc = 'img/3.jpg'; 
$(".aktualita1").click(function() { 
    $('img[src="' + sndSrc + '"], img[src="' + trdSrc + '"]').fadeOut(250, function(){ 
     $(this).attr('src', fstSrc); 
    }).fadeIn(250) 
}); 

Wenn Sie das Bild auf dem anderen verblassen wollen, berücksichtigen.

Zum Beispiel:

var fstSrc = 'https://i.imgur.com/EUym7Pw.jpg'; 
 
var sndSrc = 'https://i.imgur.com/Xt8ICog.jpg'; 
 
var trdSrc = 'https://i.imgur.com/Fp2EwFc.jpg'; 
 
$(".aktualita1").click(function() { 
 
    $('img[src="' + sndSrc + '"], img[src="' + trdSrc + '"]').each(function() { 
 
    if ($(this).is(':visible')) { 
 
     var pos = $(this).position(); 
 
     $(this).parent().append($('<img src="' + fstSrc + '">').css({ 
 
     position: 'absolute', 
 
     left: pos.left, 
 
     top: pos.top, 
 
     display: 'none' 
 
     }).fadeIn(500)); 
 
     $(this).fadeOut(500); 
 
    } 
 
    }) 
 
});

.aktualita1 { 
 
    position: relative; 
 
} 
 
.aktualita1 img { 
 
    height: 200px; 
 
    width: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="aktualita1"> 
 
    <img src="https://i.imgur.com/Xt8ICog.jpg"> 
 
    <img src="https://i.imgur.com/Fp2EwFc.jpg"> 
 
</div>