jQuery 动画边距顶部

Question

我在 jsfiddle 上有一个脚本： http://jsfiddle.net/kX7b6/

时没有任何反应

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

动画有效，但边距无效

只是为了表明动画本身有效，我向动画添加了不透明度函数。据我所知，margin-top 设置为 0px 内联。

Answer 1

您有 MarginTop 而不是 marginTop

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

如果你离开动画中间也会有很多问题，这里是更新：

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

注意我将其更改为 mouseenter 和 mouseleave 因为我不认为其目的是当您将鼠标悬停在红色或绿色区域上时取消动画。

Answer 2

使用 'marginTop' 而不是 MarginTop

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

Answer 3

使用 less 代码检查相同的效果

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

查看最近的小提琴

Answer 4

MarginTop 应该是 marginTop。

Answer 5

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

不是 MarginTop。有用

Answer 6

正如所说的 marginTop - 不是 MarginTop。

另外为什么不将其动画化回来呢？ ：）

看：
http://jsfiddle.net/kX7b6/2/

Answer 7

我不知道“.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);
};

Answer 8

使用以下代码应用一些边距

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

请参阅此答案： 向下滚动到 div + a一定的余量