JQuery中的元件fadeOut（）和fadeIn（）時的replaceWith（）

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替換內容，然后在替換徽標后淡入。