我似乎无法弄清楚如何以一种好的方式执行以下操作。
我需要淡出图像。 更改图像的来源。 然后将其淡入。
但问题是淡出和淡入应该同时出现。 当然，我现在这样做的方式（向下阅读几行）会在淡出期间更改源，这非常明显。
$('#lightboxImage').fadeOut('slow');
$('#lightboxImage').attr('src', 'an imagesource');
$('#lightboxImage').fadeIn('fast');
当我刚刚运行它时。它会在淡出之前更改图像。
当我将第二行放在 fadeOut 回调函数中时。在新图像淡入之前有一小段白屏。
希望有人可以帮助我解决这个问题。 :)
【问题讨论】：
标签： jquery image fadein fadeout
排队就行了：
$('#lightboxImage').fadeOut('slow', function () {
$(this).attr('src', 'an imagesource').fadeIn('fast');
});
});
使用 $(this) 一次又一次地找不到它。
编辑：更新了我的答案，因为 attr 函数没有回调。谢谢大家。
【讨论】：
$('#lightboxImage') 更改为$(this)。实际上，它应该是对其他答案的评论，而不是单独的答案——它与其他任何答案都没有任何不同。它只是浪费空间。
attr 定义回调，我认为这是不允许的。所以@pulkit，我认为你因为错误的答案而被否决了，attr 没有回调。
使用回调函数。
$('#lightboxImage').fadeOut('fast', function() {
$('#lightboxImage').attr('src', 'an imagesource').fadeIn('fast');
});
wikipedia page 很好地解释了回调函数。
在计算机编程中，回调是对可执行代码的引用， 或一段可执行代码，作为参数传递给其他 代码。这允许较低级别的软件层调用子程序 （或函数）在更高级别的层中定义。
【讨论】：
slow 更改为fast，看看是否是您想要的。 :)
我不知道人们给出的答案是不是你想要的。
我认为您希望第一张图片“淡入”第二张图片。
在这种情况下，您需要有两张图片，一张在一张后面。
后面的需要在 css 中为 display: none。
那么你可以这样做：
$('img#image1').fadeOut();
$('img#image2').fadeIn();
第一张图片应该淡入第二张。
您需要绝对定位这两张图片，以便前景一张在淡入淡出之前覆盖背景一张。
这也可以让你来回前进：http://jsfiddle.net/vre4M/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动画完成后调用的函数。
【讨论】：