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

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

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

我不知道＆＃34; .stop（）＆＃34;是必要的。

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

请参阅此ans：Scroll down to div + a certain margin

jQuery动画边缘顶部

8 个答案: