替換後動畫到高度爲0

Question

我試圖動畫到高度爲0，然後在做替換後刪除。

有沒有人有任何想法爲什麼jQuery動畫沒有發生？

$('.dataCard').not('.focused').each(function(){ 
    var div = $('<div />',{ 
     css : { height : $(this).height() } 
}); 
    $(this).replaceWith(div).animate({ height:0 }, function(){ $(this).remove() }); 

Answer 1

$(this).replaceWith(div);回報this到鏈，在這種情況下是你只是刪除了數據卡元素。

$('.dataCard').not('.focused').each(function() { 
    var div = $('<div />', { 
     css: { 
      height: $(this).height() 
     } 
    }); 
    $(this).replaceWith(div); 
    div.animate({ 
     height: 0 
    }, function() { 
     $(this).remove() 
    }); 
}); 

另請注意，您剛剛插入的元素實際上必須具有可以爲其設置動畫的高度。

Answer 2

嘗試這種方式

var div = null; 
$('.dataCard').not('.focused').each(function(){ 
    var div = $('<div />',{ 
     css : { height : $(this).height() } 
}); 
if (div != null) { 
    $(this).replaceWith(div); 
    div.animate({ height:0 }, function(){ $(this).remove() }); 
}