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

用更少的代碼檢查同樣的效果

$(".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

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

正如所說的 marginTop - 不是 MarginTop。

還有為什么不把它動畫回來？ :)

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

Answer 8

使用以下代碼應用一些邊距

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

看到這個答案： 向下滾動到 div + 一定的邊距