具有高度跳跃/移位的 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 中移除。

问题是，messages-elements 下方的内容会像轻微的颠簸一样将最后几个像素跳到顶部。仅当存在多个消息框时，这种震动才明显。设置的边距越大，它也变得越明显。如您所见，我已尝试使用marginBottom: 0 解决问题，但它不起作用。

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

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

Answer 1

jQuery animate 函数使用一个名为 swing 的默认缓动函数。尝试更改您的代码以使用“线性”缓动函数。

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

查看文档here

Answer 2

第一个问题是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();
    });
}

这使得正在消失的元素折叠其上边距，通过否定其上方元素的边距并通过减去它的高度（没有边距）使元素“消失”，同时设置它自己的底部-margin 与它上面的元素相同，基本上匹配它消失时将存在的元素。它似乎工作正常，您只需要担心上一个边距，因为下一个是自动处理的。

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

我自己的例子有助于了解发生了什么：http://jsfiddle.net/5PRy2/2/