jQuery同时淡化图像答案

【问题标题】：jQuery Fade Images simultaneouslyjQuery同时淡化图像
【发布时间】：2012-08-15 15:32:23
【问题描述】：

我正在使用 jQuery 来交叉淡化图像。

这是我正在使用的代码：

$('.' + currentimage).fadeOut('slow', function() {
    $('.' + selectedimage).fadeIn('slow');
});

这是在所选图像开始淡入之前将第一张图像淡出 100%。当第一张图像淡入 60-70% 时，是否有一种简单的方法可以开始淡入第二张图像？

编辑：所有好的答案。我认为还有一个问题。我的图像没有重叠显示 - 一次只能看到 1 张图像。

【问题讨论】：

标签： jquery image

【解决方案1】：

试试

$('.' + currentimage).fadeOut('slow');
$('.' + selectedimage).delay(100).fadeIn('slow');

【讨论】：

最干净的方法，尽管所有当前的答案都有效。

【解决方案2】：

slow 是 600 毫秒，所以 420 是 70%

$('.' + currentimage).fadeOut('slow');
$('.' + selectedimage).delay(420).fadeIn(600);

【讨论】：

我建议使用.delay(420) 而不是setTimeout()，因为它的代码更简洁。
但现在和之前的答案一样;)
@Archer - 不一样。亚当实际上找到了 70% 的适当延迟。另一个答案没有。

【解决方案3】：

你可以作弊并应用部分淡入淡出（使用fadeTo，调用你的其他函数，然后继续。

$('.' + currentimage).fadeTo('slow', .6, function() {
    $('.' + selectedimage).fadeIn('slow');
    $(this).fadeOut('slow');
});

【讨论】：

我喜欢这个，但你不会在fadeIn 完成后同时fadeIn 和fadeOut，而不是fadeOut 吗？

【解决方案4】：

那是因为你为fadeOut() 声明的函数是一个回调函数，只有在fadeOut() 完成后才会调用。您应该能够简单地执行一个项目之后另一个项目以获得所需的效果。这并不像在 fadeOut() 上从 X% 开始那样精确，但您可以调整 fadeOut 和 fadeIn 时间以获得所需的效果，或者在 fadeIn 上输入 delay()。

$('.' + currentimage).fadeOut('slow');
$('.' + selectedimage).fadeIn('slow');

【讨论】：

这个问题是第一张图片淡化成黑色，然后其他图片只有在第一张图片淡出后才会出现。