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

User · Answer

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

User · Answer

use  marginTop  instead of MarginTop    this  find   info   animate    marginTop    -50px   opacity  0 5    1000

User · Answer

this  find   info   animate   margin-top    -50px   opacity  0 5    1000     Not MarginTop  It works

User · Answer

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

User · Answer

MarginTop should be marginTop

User · Answer

As said marginTop - not MarginTop   Also why not animate it back      See  http   jsfiddle net kX7b6 2

User · Answer

i didn t know that the   stop    is necessary     window  scroll function          var scroll     window  scrollTop       console log scroll         if  scroll  gt   50              sidebar-padder   stop   animate    height    380px    1000         else             sidebar-padder   stop   animate    height    600px    1000

User · Answer

check this same effect with less code    quot  item quot   mouseover function            info   animate   marginTop   -50px    opacity  0 5    1000         View recent fiddle

[javascript] jQuery animate margin top

Examples related to javascript

Examples related to jquery

Examples related to css

Examples related to jquery-animate

Examples related to margin