具有高度跳转/移位的jQuery动画

Question

[我正在尝试编写一个可以从DOM中删除元素的函数，但是我遇到了无法解决的问题。

代码看起来像这样：

function closeMessage(message) {
    var height = $(message).outerHeight();
    $(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0}, function(){
        $(message).remove();
    });
}

变量message是要删除的元素。在CSS内，我已将margin-top和margin-bottom分配给了消息元素。

执行上述功能时，消息元素的透明度变为0.01％不透明（=几乎不可见，但仍然存在），然后负边距产生了以下效果：消息元素下方的内容向上滑动。之后，在回调中，将从DOM中删除消息元素。

问题是，消息元素下面的内容将最后几个像素跳到顶部，就像一个小颠簸一样。仅当存在多个消息框时，这种震颤才明显。设置的边距越大，也越引人注意。如您所见，我已经尝试过使用marginBottom: 0解决问题，但是它不起作用。

我还尝试了jQuery的不同的height();函数，例如outerHeight();，outherHeight(true);和innerHeight();，但这并没有解决问题。

所以我的问题是：上面的代码有问题吗？为什么动画结束阶段会有这么小的“跳跃”？这是正常行为吗？

Answer 1

第一个问题是，outerHeight在不将true传递给它的情况下不考虑边距：

var height = $(message).outerHeight(true);
$(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0}, function(){
    $(message).remove();
});

第二个问题是，通过CSS定义，相邻元素的垂直边距会折叠，这意味着底部边距与下一个元素的顶部边距重叠。除非所有顶部/底部边距始终相同，否则这将使计算更加困难。

编辑：我认为，只要您没有负边距或任何真正奇怪的地方，以下内容就应该起作用：

function closeMessage(message) {
    var pBot = 0;

    if ($(message).prev().length) {
        pBot = parseInt($(message).prev().css('marginBottom'));
    }

    var height = $(message).outerHeight();
    $(message).fadeTo("fast", 0.01).animate({
        marginTop: -height-pBot+'px',
        marginBottom: pBot+'px'
    }, 'linear', function() {
        $(message).remove();
    });
}

[这会使要消失的元素的上边距缩小，方法是忽略其上方的元素的边距，然后减去其高度（无边距），使该元素“消失”，同时设置其自己的底部-与上一个元素的边距相同，本质上与消失时的内容相匹配。似乎工作正常，您只需要担心前一个边距，因为下一个边距是自动处理的。

示例：http://jsfiddle.net/FxR9M/

我自己的示例有助于查看发生了什么情况：http://jsfiddle.net/5PRy2/2/

Answer 2

jQuery animate函数使用默认的缓动函数，称为swing。尝试更改代码以使用“线性”缓动功能。

$(message).fadeTo("fast", 0.01).animate({marginTop: -height, marginBottom: 0},'linear', function(){
        $(message).remove();
    });

查看文档here