Question

我似乎无法弄清楚如何以良好的方式做到以下几点。

我需要淡出图像。更改图像的来源。然后淡出它。

但问题是fadeOut和fadeIn应该在同一时间。当然，我现在这样做的方式（读取几行）将在fadeOut期间更改源，这是非常明显的。

$('#lightboxImage').fadeOut('slow');
$('#lightboxImage').attr('src', 'an imagesource');
$('#lightboxImage').fadeIn('fast');

当我跑这个时。它会在fadeOut之前更改图像。

当我把两个第二行放在fadeOut回调函数中时。在新图像淡入之前，会有一小段白屏。

希望有人可以帮我解决这个问题。：）

Answer 1

您应该使用fadeOut回拨功能。见下文，

$('#lightboxImage').fadeOut('slow', function () {
   // Callback function that will be called after fadeOut
   $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

以下是jQuery文档，

.fadeOut( [duration] [, easing] [, callback] )


durationA确定动画运行时间的字符串或数字。

easingA字符串，指示用于转换的缓动函数。

callback动画完成后调用的函数。

Answer 2

使用回调函数。

$('#lightboxImage').fadeOut('fast', function() {
    $('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});

wikipedia page很好地解释了回调函数。

在计算机编程中，回调是对可执行代码的引用，或者一段可执行代码，作为参数传递给其他人码。这允许较低级别的软件层调用子例程（或函数）在更高级别的层中定义。

Answer 3

我不知道人们给出的答案是否是你想要的。

我认为您希望第一张图片“淡入”第二张图片。

在这种情况下，您需要有两个图像，一个在另一个之后。

后面的人需要在css中display: none。

然后你可以这样做：

$('img#image1').fadeOut();
$('img#image2').fadeIn();

第一张图片应该淡入第二张图片。

您需要绝对定位两张图片，以便前景图片在淡入淡出之前覆盖背景。

e.g。 http://jsfiddle.net/vre4M/

这也允许您前后移动：http://jsfiddle.net/vre4M/1/

Answer 4

对它们进行排队可以解决问题：

$('#lightboxImage').fadeOut('slow', function () {
  $(this).attr('src', 'an imagesource').fadeIn('fast');
  });
});

使用$（this）不能一次又一次地找到它。

编辑：更新了我的答案，因为attr函数没有回调。谢谢你们。

jQuery如何同时做事

4 个答案: