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

Answer 2

.delay（）方法最适合延迟排队的jQuery效果。因为它是有限的 - 例如，它没有提供取消延迟的方法。

因此，您可以尝试使用排队的jQuery效果，并在它们之间使用.delay（1000）。像：

$("button").click(function() {
      $("div.first").slideUp(300).delay(800).fadeIn(400);
      $("div.second").slideUp(300).fadeIn(400);
    });</script>

.delay（）函数不适用于attr（）函数

2 个答案: