javascript - JS : Set animation duration for change of 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);
    });

当然，当点击时，图像立即改变。我如何为这次点击设置 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)
});

如果您希望图像在另一图像之上淡出，请考虑在该图像之上使用另一个图像元素(反之亦然)。

例如:

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>