jQuery animate margin top

Question

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.

Solution 1

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.

Solution 2

use 'marginTop' instead of MarginTop

$(this).find('.info').animate({ 'marginTop': '-50px', opacity: 0.5 }, 1000);

Solution 3

check this same effect with less code

$(".item").mouseover(function(){
    $('.info').animate({ marginTop: '-50px' , opacity: 0.5 }, 1000);
}); 

View recent fiddle

Solution 4

MarginTop should be marginTop.

Solution 5

$(this).find('.info').animate({'margin-top': '-50px', opacity: 0.5 }, 1000);

Not MarginTop. It works

View more solutions

Comments

[Arash Hatami]

nice and pretty !