7

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

知道为什么吗？

注意：上滑速度很慢，以便更好地显示问题。

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

FWIW：我用 jQuery提交了一张票

4

1 回答 1

2

编辑：

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

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

这个小提琴演示了在's 动画的paddingBottom最后被简单地减去。slideUp微妙的paddingBottom减法在你的小提琴上是不可见的，因为当你slideDown在回调内部调用时，它paddingBottom会立即添加回来（与它的减法对称）。小提琴

如果您不想等到修复程序发布并且不想降级到 1.7.2，则使其行为与 1.7.2 相同的临时解决方法是将 CSS 属性映射传递给.animate：

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);
    });
}

小提琴

让我们投票支持您的票，并希望它在 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);
});

小提琴

于 2012-08-29T05:48:30.213 回答