Jquery animated div ignores parent overflow property

Question

Aloha

I have a div with a set of css overflow: hidden . Inside, I have a div that I use jquery to animate.

$ ('# innerDiv'). animate ({left: '- = 100'}, 1000);

when I do this, I see that moving the innerdiv outside the div div, even if my overflow is set to hidden.

This is normal? How can i fix this?

Thanks,

Answer 1

If innerDiv has position:absolute , it is not affected by overflow:hidden external <div> element.

Try giving it position:relative .

Absolute example: http://jsfiddle.net/FVdJL/

Relative example: http://jsfiddle.net/FVdJL/1/

---

EDIT: Give the outer container position:relative and you can keep absolute on innerDiv .

Relative example: http://jsfiddle.net/FVdJL/3/