在JQuery中使用fadeOut（）和fadeIn（）替换whileWith（）

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/

Answer 2

尝试：

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

假设您希望实现的内容逐渐淡出，则隐藏.logo时替换内容，然后在替换徽标后淡入。