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小提琴： http://jsfiddle.net/vs6yejag/

Answer 1

请参阅.animate( properties, options )

缓和（默认：摆动）

输入：String

一个字符串，指示用于转换的缓动函数。

尝试easing:"linear";其中"linear"为String，引号为

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

Answer 2

你没有在演示中添加线性，它必须以字符串形式给出，否则将被视为未定义：

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

<强> Updated fiddle

为动画添加线性缓动

2 个答案: