jQuery animar margen superior

Question

Tengo un script en jsFiddle: http://jsfiddle.net/kX7b6/

Nada sucede en vuelo estacionario

En vuelo estacionario quiero que el cuadro verde para superponer el cuadro rojo con un margen negativo -50px. No pasa nada.

La animación funciona, pero no el margen

Sólo para mostrar que la animación en sí está trabajando i añadió una función opacidad a la animación. margin-top está configurado en 0px en línea por lo que puedo ver.

Answer 1

Tenías MarginTop en lugar de marginTop

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

También es muy verde todavía si deja mediados de animación, aquí está la actualización:

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

Nota lo cambié a mouseenter y mouseleave porque no creo que la intención fuera cancelar la animación cuando pasas el cursor sobre el área roja o verde.

Answer 2

uso 'marginTop' en lugar de MarginTop

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

Answer 3

MarginTop debe ser marginTop.

Answer 4

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

Not MarginTop. Funciona

Answer 5

Como dijimos marginTop - no MarginTop.

¿Por qué no animarlo de nuevo? :)

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

Answer 6

cheque este mismo efecto con menos código

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

http://jsfiddle.net/sandeep/kX7b6/4/

Answer 7

que no sabía que el ".Stop()" es necesario .

$(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); 
}; 

Answer 8

uso el siguiente código a aplicar un poco de margen

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

ver este American National Standard: Scroll down to div + a certain margin