Question

I’m trying to animate drop up using negative top, the animation went okay, but the next element below also moving down.

Click this link for the example
http://jsfiddle.net/rooivalk/z9JZ3/1/

when the green div got mouse over event, the red div would increase its height to 50px and the top property down by -49px, so red div would looks like drop up menu alright.

but I think the green div, being untouched, should stay in the position.
In my example, the green div also moving down as much as the added height of red div.

so, what happen with the green div? It’s kinda like the red div has double of the original added height then pushing down the green div?

Note : I have tried to fix it by animate the green div (also) using negative property. It’s looks good, but when I hovering cursor on green div wildly, sometimes the green div would move up and down (shaking vertically) about 1px.

please enlight meh 😀

thx

Answer 1

Set the container to be position:relative and set the resizeable div to be position:absolute.

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