javascript - 使用 jQuery + FadeOut 更改图像源

Question

我已经成功实现了这段代码，以便使用jquery在img srcs之间切换，从之前的solution中找到。

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

我想知道是否有人可以帮助我实现淡出效果以在 img srcs 之间进行转换，我已经尝试了几次，但似乎无法理解 jquery。 非常感谢您的帮助!

Answer 1

两者.fadeOut()和 .fadeIn()当动画完成时，可以使用第二个参数作为函数 - 您可以仅在图像隐藏后使用它来更新 src

然后您可以像平常一样链接.fadeIn()

$('img').on('click', function() {
  let src = ($(this).attr('src') === 'https://placekitten.com/125/?image=11')
    ? 'https://placekitten.com/125/?image=12'
    : 'https://placekitten.com/125/?image=11';
    
  $(this)
    .fadeOut(1500, () => $(this).attr('src', src))
    .fadeIn(1500);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src='https://placekitten.com/125/?image=11'/>

为了演示/清晰度，我稍微交换了您的代码