jQuery animate margin top

javascript jquery css jquery-animate margin
Jens Törnell picture Jens Törnell · Oct 18, 2011 · Viewed 116.5k times · Source

I have a script on jsfiddle: http://jsfiddle.net/kX7b6/

Nothing happens on hover

On hover I want the green box to overlap the red box with a negative margin -50px. Nothing happens.

The animation works, but not margin

Just to show that the animation itself is working i added a opacity function to the animation. margin-top is set to 0px inline as far as I can see.

Answer

Esailija picture Esailija · Oct 18, 2011

You had MarginTop instead of marginTop

http://jsfiddle.net/kX7b6/1/

It is also very buggy if you leave mid animation, here is update:

http://jsfiddle.net/kX7b6/3/

Note I changed it to mouseenter and mouseleave because I don't think the intention was to cancel the animation when you hover over the red or green area.

Related questions

animating addClass/removeClass with jQuery

I am using jQuery and jQuery-ui and want to animate various attributes on various objects. For the sake of explaining the issue here I've simplified it to one div that changes from blue to red when the user mouses over …

Read More
Animate element to auto height with jQuery

I want to animate a <div> from 200px to auto height. I can’t seem to make it work though. Does anyone know how? Here’s the code: $("div:first").click(function(){ $("#first").animate({ height: "auto" }, 1000 ); });

Read More
jQuery Animate top (From bottom to top)

I am trying to animate a Div a top:275. I tried .animate( {marginTop: -820 } but on each screen it ends up to a different position. . . So I changed the marginTop to .animate( {top: 275} but the div comes from the top …

Read More