JS：クリック機能上のSRC

Question

私は変更IMGのために、このスクリプトを使用してい

の変更のための設定アニメーションの再生時間

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); 
    }); 

クリックで、画像はもちろん、immidiately変わります。このクリックにはどのように0.5秒の時間を設定できますか？いいフェードアニメーションで画像が変化しますか？ :)ありがとう！

Answer 1

fadeOut画像のsrcを変更してからfadeInに変更すると、効果が得られます。

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) 
}); 

あなたは画像がもう一方の上にフェードインしたい場合は、その1つ（またはその逆）の上に別の画像要素を使用することを検討してください。例えば

：

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>