replaceWith() while 元素 fadeOut() 和 fadeIn() 在 JQuery答案

【问题标题】：replaceWith() while elements fadeOut() and fadeIn() in JQueryreplaceWith() while 元素 fadeOut() 和 fadeIn() 在 JQuery
【发布时间】：2011-12-13 18:55:55
【问题描述】：

我要做的只是淡出容器内的所有图像，将#next1的图像替换为#active，然后再次淡入所有图像。

这是我的代码：

$('.logo').fadeOut('slow', function() {
    $('#active>img').replaceWith( $('#next1>img') );
}).fadeIn('slow', function() {});

这不起作用。我发现自己看着空的#active

但是这个；

$('.logo').fadeOut('slow', function() {}).fadeIn('slow', function() {});
$('#active>img').replaceWith( $('#next1>img') );

使替换效果很好，但不是我想要做的动画。

我使用 chrome 和 ie 得到相同的结果。

【问题讨论】：

标签： javascript jquery jquery-animate fadein replacewith

【解决方案1】：

我的建议是查看 jQuery 中的 promise/done 方法。作为示例，您可以执行以下操作：

$('.logo').fadeOut('slow').promise().done(function(logo) {
    $('#active>img').replaceWith($('#next1>img'));
    $(logo).fadeIn('slow');
});

jQuery 承诺 - http://api.jquery.com/promise/

【讨论】：

【解决方案2】：

试试：

$('.logo').fadeOut('slow', function() {
    $('#active>img').replaceWith( $('#next1>img') );
    $(this).fadeIn('slow');
});

假设你想要达到的效果是淡出，然后在.logo被隐藏的情况下替换内容，然后在替换logo后淡入。

【讨论】：