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

Posted 2023-05-08

【中文标题】replaceWith() while 元素 fadeOut() 和 fadeIn() 在 JQuery

【英文标题】：replaceWith() while elements fadeOut() and fadeIn() in 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 得到相同的结果。

【参考方案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后淡入。