如何添加easing到這個動畫

Question

這裏是一個現有的函數滾動到我的div錨點，但我想用easing，而不是如何編輯這個添加，我已經嘗試了幾件事情但沒有奏效

我想這

$.fn.anchorAnimate.defaults = { 
    speed: 600, 
    offset: -65, 
    easing:"easeOutCubic" 
    }; 

下面是現有功能

(function ($) { 
    $.fn.anchorAnimate = function(options) { 
    var settings = $.extend({}, $.fn.anchorAnimate.defaults, options); 

    return this.each(function() { 
     var caller = this; 
     $(caller).click(function(event) { 
     event.preventDefault(); 
     var elementClick = $(caller).attr("href"); 

     var destination = $(elementClick).offset().top + settings.offset; 
     $("html:not(:animated), body:not(:animated)").animate({ scrollTop: destination}, settings.speed, function() { 
      if(0 === settings.offset) { 
      window.location.hash = elementClick; 
      } 
     }); 
     return false; 
     }); 
    }); 
    }; 

    $.fn.anchorAnimate.defaults = { 
    speed: 600, 
    offset: -65 
    }; 
}(jQuery)); 

Answer 1

擴展的.animate()功能不使用任何緩和的設置。你可以這樣添加：

$("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination}, settings.speed, settings.easing, function() { 
    // bla bla 
}); 

...這：

$.fn.anchorAnimate.defaults = { 
    speed: 600, 
    offset: -65, 
    easing: "swing" 
}; 

...但問題是，有jQuery中沒有easeOutCubic可用。檢查：

唯一寬鬆的實現在jQuery庫是推進以恆定的速度默認， 稱爲擺動，和一個名爲 線性。更多的簡化功能可以通過使用插件， ，特別是jQuery UI套件。

相關jQuery文章here。

jQuery UI easing here。

jQuery UI自定義下載僅緩存here。