更换后动画到高度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元素。

$('.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() });
}