Javascript jQuery设置页边距顶部动画

我在JSFIDLE上有一个脚本：

悬停时不会发生任何情况

悬停时，我希望绿色框与红色框重叠，并带有负边距-50px。什么也没发生

动画可以正常工作，但没有边距

---

为了显示动画本身正在工作，我在动画中添加了一个不透明度函数。就我所见，边距顶部设置为0px内联。

您使用的是

MarginTop

而不是

MarginTop

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

如果您离开中间动画，也会出现很多问题，下面是更新：

---

注意：我将其更改为

mouseenter

和

mouseleave

，因为我不认为这样做的目的是在您悬停在红色或绿色区域时取消动画。

使用

'marginTop'

而不是

marginTop

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

---

MarginTop

应该是

MarginTop

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

---

不是玛金托普。正如marginTop所说，它是有效的，而不是marginTop

还有，为什么不重新设置动画呢？：）

见：

---

用更少的代码检查同样的效果

我不知道“.stop（）”是必需的

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

---

使用以下代码应用一些余量

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

---

看看这个答案：

漂亮又漂亮！