负顶部使高度翻倍?

时间:2011-05-26 08:24:08

标签: javascript jquery css

我正在尝试使用负顶部动画放下动画,动画没问题,但下面的下一个元素也向下移动。

单击此链接以获取示例 http://jsfiddle.net/rooivalk/z9JZ3/1/

当绿色div将鼠标悬停在事件上时,红色div将其高度增加到50px,顶部属性减少-49px,因此红色div看起来像下拉菜单。

但是我认为绿色的div,不受影响,应该留在原位。 在我的例子中,绿色div也向下移动了红色div的增加高度。

那么,绿色div会发生什么?这有点像红色div有原始增加高度的两倍然后按下绿色div?

注意:我试图通过使用负属性为绿色div(也)设置动画来修复它。它看起来不错,但是当我将光标悬停在绿色div上时,有时绿色div会上下移动(垂直抖动)大约1px。

请点亮meh:D

THX

1 个答案:

答案 0 :(得分:2)

将容器设置为position:relative,并将可调整大小的div设置为position:absolute

demo http://jsfiddle.net/gaby/z9JZ3/2/