javascript - .delay() 函数不适用于 attr() 函数

Question

我的网站中有一些图像，使用此代码我想隐藏它们，更改显示的图像并将它们显示回来，但新图片会立即显示。我不知道该怎么办。

这是 JavaScript:

$(document).ready(function() {
  $('.show').click(function() {
    $(this).removeClass("show").addClass("clickedShow");
    $('.show').animate({opacity: 0}, 1000);
    $(this).delay(1000).animate({opacity: 0}, 1000);

    $(this).animate({opacity: 1}, 1000).attr("src", "pic2.png");
    $('.show').delay(1000).animate({opacity: 1}, 1000).attr("src", "pic2.png");
  });
});

Answer 1

delay 仅适用于可排队的动画，attr 未排队，因此不受 delay 的影响。如果您想在动画结束时执行某些操作，请将操作添加到 animation 回调中。

$(this).animate({opacity: 1}, 1000, function(){$(this).attr("src", "pic2.png")});