在 JQuery 中，replaceWith() 而元素 fadeOut() 和 fadeIn()

Question

我想做的很简单，淡出容器内的所有图像，将 #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 得到相同的结果。

Answer 1

我的建议是查看 jQuery 中的 Promise/Done 方法。作为一个例子，你可以这样做：

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

jQuery Promise - http://api.jquery.com/promise/< /a>

Answer 2

尝试：

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

假设您想要实现的效果是淡出，然后在 .logo 隐藏时替换内容，然后在替换徽标后淡入。