jQuery slideUp()没有缩小padding-bottom值

时间:2012-08-29 04:29:07

标签: jquery css

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

知道为什么吗?

注意:向上滑动非常慢,无法更好地显示问题。

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

FWIW:我用jQuery提交了ticket

1 个答案:

答案 0 :(得分:2)

修改

此回归在jQuery 1.8.1中得到修复 - fiddle

<小时/> 正如您已经注意到的,这是v1.8.0中的另一个错误。

fiddle表明paddingBottom只是在slideUp的动画结尾处被减去。在你的小提琴上看不到微妙的paddingBottom减法,因为当你在回调中调用slideDown时,paddingBottom会立即加回(与减去它的方式相对应)。 Fiddle

如果您不想等到修复程序发布并且不想降级到1.7.2,那么使其行为为1.7.2的临时解决方法是将CSS属性映射传递给{{ 1}}:

.animate

Fiddle

让我们对您的机票进行投票,并希望它在1.8.1版本中得到修复。

编辑:更新了将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); }); } 存储在元素.data()中的变通方法,这样它可以在以后的时间和不同的范围内使用。要一次为多个元素制作动画,请使用originalDimensions次迭代来设置.each

.data()

Fiddle