jQuery animate margin top jQuery animate margin top javascript javascript

jQuery animate margin top


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.


use 'marginTop' instead of MarginTop

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


check this same effect with less code

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

View recent fiddle