为动画添加线性缓动

Question

红色框的高度从 0 增加到它的全高，但它是通过摆动缓动来实现的。我不知道如何让它线性化。

我试过这个和其他一些东西，但我无法让它工作：

$("#movement").animate({"height": open_height}, {duration: slideDuration }, {easing: linear});

完整脚本：

 var sliderHeight = "0";
  var initialDelay = 0;
  var slideDuration = 2500;

  $(document).ready(function(){
    $('#movement').show();
    $('#movement').each(function () {
        var current = $(this);
        current.attr("box_h", current.height());
    });
    $("#movement").css("height", sliderHeight);

    var delay = function() { sliderOpen(); };
      setTimeout(delay, initialDelay);
      });

  function sliderOpen()
  {
    var open_height = $("#movement").attr("box_h") + "px";
    $("#movement").animate({"height": open_height}, {duration: slideDuration });
  }

JS Fiddle: http://jsfiddle.net/vs6yejag/

Answer 1

见.animate( properties, options )

easing (default: swing)

Type: String

A string indicating which easing function to use for the transition.

尝试easing:"linear"；其中 "linear" 是 String ，在引号中

jsfiddle http://jsfiddle.net/vs6yejag/3/

Answer 2

demo中没有添加linear，必须以字符串形式给出，否则会被认为是undefined:

var open_height = $("#movement").attr("box_h") + "px";
  $("#movement").animate({"height": open_height}, 
   {duration: slideDuration, easing: "linear" });

Updated fiddle

为动画添加线性缓动

Adding linear easing to animation

javascript

jquery

jquery-easing

easing

jquery-animate