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

如果您希望图像在另一个图像的顶部淡入淡出，请考虑在该图像的顶部使用另一个图像元素（或反之亦然）。

例如：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

JS：设置更改src的动画持续时间

1 个答案: