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.

回答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.

回答2:

use 'marginTop' instead of MarginTop

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

回答3:

check this same effect with less code

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

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

回答4:

MarginTop should be marginTop.

回答5:

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

Not MarginTop. It works

回答6:

As said marginTop - not MarginTop.

Also why not animate it back? :)

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

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/7806637/jquery-animate-margin-top