jQuery slideUp() 不缩小 padding-bottom 值

Question

在this fiddle ，您会注意到当您单击其中一个按钮时，容器会慢慢向上滑动。当它到达顶部时，您会发现它并没有完全向上滑动。如果您在检查器中查看，li 的底部填充并没有像您预期的那样在 slideUp() 操作期间缩小。

知道为什么吗？

注意:上滑速度太慢，才能更好的显示问题。

注意 2:当我将 jQuery 库更改为 1.7.2 时，它实际上可以正常工作。有趣。

FWIW:我提交了一份 ticket使用 jQuery

Answer 1

编辑:

此回归已在 jQuery 1.8.1 中修复 - fiddle .

---

正如您已经注意到的，这是 v1.8.0 中的另一个错误。

这fiddle演示了 paddingBottom 只是在 slideUp 动画的最后减去。微妙的 paddingBottom 减法在你的 fiddle 上是不可见的，因为当你在回调中调用 slideDown 时，paddingBottom 会立即添加回来(与如何对称它被减去)。 Fiddle

如果您不想等到修复发布并且不想降级到 1.7.2，一个临时的解决方法是将 CSS 属性映射传递给 .动画:

function next() {
    var q = $(this).parents('li');
    q.data('originalDimensions', {
        borderTopWidth: q.css('borderTopWidth'),
        paddingTop: q.css('paddingTop'),
        height: q.css('height'),
        paddingBottom: q.css('paddingBottom'),
        borderBottomWidth: q.css('borderBottomWidth')
    });
    q.animate({ borderTopWidth:0, paddingTop:0, height:0, paddingBottom:0, borderBottomWidth:0 }, 5000, function(){
        $(this).animate($(this).data('originalDimensions'), 5000);
    });
}

Fiddle

让我们投票支持您的票，并希望它在 1.8.1 版本中得到修复。

编辑:更新了将 originalDimensions 存储在元素的 .data() 中的解决方法，这样它就可以在以后的时间和不同的范围内使用。要一次为多个元素设置动画，请使用 .each 迭代来设置 .data():

q.each(function() {
    var $this = $(this);
    $this.data('originalDimensions', {
        borderTopWidth: $this.css('borderTopWidth'),
        //...
    });
});
q.animate({ borderTopWidth:0, /*...*/ }, 5000, function() {
    $(this).animate($(this).data('originalDimensions'), 5000);
});

Fiddle