向jQuery滾動邊欄添加動畫

Question

我在jQuery中使用了滾動邊欄功能，並且想要爲過渡添加動畫。如何編輯我的代碼以在頁面上下滾動時應用動畫來平滑過渡？

這裏是我的FIDDLE

這裏是我的JS：

$(function() { 

    var $blah = $("#blah"), 
     $window = $(window), 
     offset  = $blah.offset(); 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
    $blah.css('top','120px'); 
     } else { 
    $blah.css('top','440px'); 
    } 
    }); 


}); 

這裏是我的CSS：

#blah { 
    display:none; 
    top: 320px; 
    right: 30px; 
    position: fixed; 
    margin: 0 20px 0 20px; 
    padding: 0px !important; 
} 

Answer 1

嘗試使用.stop().animate()。之所以我建議在.animate()之前使用.stop()是爲了防止效應過度鏈接。基本上你會指示瀏覽器「當我滾動時放棄你現在正在做的事情」，然後「開始動畫」。

$(function() { 

    var $blah = $("#blah"), 
     $window = $(window), 
     offset = $blah.offset(); 

    $window.scroll(function() { 
     if ($window.scrollTop() > offset.top) { 
      $blah.stop().animate({ 
       top: 50 
      }); 
     } else { 
      $blah.stop().animate({ 
       top: 100 
      }); 
     } 
    }); 
}); 

在這裏看到的小提琴 - http://jsfiddle.net/4VbDN/6/

[編輯]：你甚至可以調整動畫的持續時間以及分配一個回調函數甚至.animation()被觸發。有關更多說明，請檢查jQuery API for .animate() :)