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分配给message-element。

当执行上述函数时，message-element淡化为0.01％不透明度（=几乎不可见但仍然存在），然后负边距会产生消息元素下方的内容向上滑动的效果。在回调之后，将从DOM中删除message-element。

问题是，messages-elements下面的内容会将最后几个像素跳到顶部，就像一个小小的震动。只有当存在多个消息框时，这种震动才会明显。设定的利润率越大，这一点也越明显。正如您所看到的，我已尝试过使用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();
    });
}

这使得正在消失的元素通过消除其上方元素的边距并通过减去其高度（没有边距）使元素“消失”同时设置其自己的底部而使其顶部边缘坍塌-margin与它上面的元素相同，基本上匹配它消失时的内容。它似乎工作正常，你只需要担心以前的保证金，因为下一个是自动处理的。

示例：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

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

2 个答案: