[javascript] jQuery animate margin top

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.

check this same effect with less code

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

View recent fiddle

MarginTop should be marginTop.

As said marginTop - not MarginTop.

Also why not animate it back? :)

See: http://jsfiddle.net/kX7b6/2/

i didn't know that the ".stop()" is necessary.

$(window).scroll(function () {

   var scroll = $(window).scrollTop();
   console.log(scroll);

     if (scroll >= 50){
       $('.sidebar-padder').stop().animate({ 'height': '380px'}, 1000);
     }else{
       $('.sidebar-padder').stop().animate({ 'height': '600px'}, 1000);
};

use the following code to apply some margin

$(".button").click(function() {
  $('html, body').animate({
    scrollTop: $(".scrolltothis").offset().top + 50;
  }, 500);
});

See this ans: Scroll down to div + a certain margin

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

Not MarginTop. It works

use 'marginTop' instead of MarginTop

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