.animate() 和 .remove() 不能一起玩

Question

我正在尝试关闭我之前附加到正文的通知面板。

$('#notify-panel').animate({top: -250},{duration: 1000, easing: 'easeInOutBack'});

这本身效果很好，但我的目标是移动 div 对象，所以我添加了一个 .remove() 语句以在动画完成后将其删除。

$('#notify-panel').animate({top: -250},{duration: 1000, easing: 'easeInOutBack'});
$('#notify-panel').remove();

当我运行它时，面板从正文中移除，但动画没有执行，图层消失了。所以我添加了 .remove() 作为回调的一部分。

$('#notify-panel').animate({top: -250},{duration: 1000, easing: 'easeInOutBack'}, {callback: function(){ $(this).remove(); }});

此网与上一步相同，其中层被从不动画移除。所以我的问题是，如果我想为 div 层设置动画然后将其删除，我将如何去做。显然，我做错了什么。

Answer 1

reading the manual 可以解决这个问题。使用其中之一：

$('#notify-panel').animate({
    top: -250
}, {
    duration: 1000,
    easing: 'easeInOutBack',
    complete: function() {
        $(this).remove();
    }
});

或者：

$('#notify-panel').animate({
    top: -250
}, {
    duration: 1000,
    easing: 'easeInOutBack'
}, function() {
    $(this).remove();
});

Answer 2

首先，您缺少值和 px 周围的引号。

我会这样写：

$('#notify-panel').animate({
    top: '-250px'
}, {
    easing: 'easeInOutBack'
}, 1000, function() {
    $(this).remove();
});