1

我似乎无法弄清楚如何以一种好的方式执行以下操作。

我需要淡出图像。更改图像的来源。然后将其淡入。

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

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

当我刚刚运行这个。它会在淡出之前更改图像。

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

希望有人可以帮助我解决这个问题。:)

4

4 回答 4

5

您应该使用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动画完成后调用的函数。
于 2012-10-25T14:42:59.763 回答
3

使用回调函数。

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

维基百科页面很好地解释了回调函数。

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

于 2012-10-25T14:43:17.057 回答
1

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

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

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

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

然后你可以这样做：

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

第一个图像应该淡入第二个图像。

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

例如http://jsfiddle.net/vre4M/

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

于 2012-10-25T14:47:22.517 回答
0

排队他们会做的伎俩：

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

使用 $(this) 一次又一次地找不到它。

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

于 2012-10-25T14:45:05.590 回答