[Solved] bottom-to-top JQuery animation not working in chrome

[stuttgart]

I’m having trouble with animating a div going from bottom to top. It works fine in Firefox but acts weird in Chrome. My guess is that is has to do with “top” getting animated and not “bottom” but I have no idea to get around this. Could someone please help me?

CodePen: http://codepen.io/JohnnyStuttgart/pen/swjtb

[Paulie_D]

Instead of bottom:0 why not top:100% ?

http://codepen.io/Paulie-D/pen/FcCwE

[Paulie_D]

Even better…do it with a toggleClass and a transition.

http://codepen.io/Paulie-D/pen/fsFaj

[stuttgart]

Yes I’ve also thought of that solution but as you can tell #two-div flows outside, under the #left-div. Is there a work around for that?

[Paulie_D]

Ahhh…a little margin-top magic

http://codepen.io/Paulie-D/pen/ydahC

[stuttgart]

That seems to work! Thank you veeeeery much!

[stuttgart]

This was very helpful. I didn’t need the toggleClass(); but I’d just set the #two to top:100%; with a margin-top -100px; and it worked fine with my initial animation solution.

[Author]

Posts