javascript - Adding linear easing to animation - Stack Overflow

The red box increases in height from 0 to its full height, but it does it with swing easing. I can't work out how I can make it linear.

I've tried this, and a few other things, but I can't get it to work:

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

Full script:

 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: /

The red box increases in height from 0 to its full height, but it does it with swing easing. I can't work out how I can make it linear.

I've tried this, and a few other things, but I can't get it to work:

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

Full script:

 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/vs6yejag/

• javascript
• jquery
• jquery-animate
• easing
• jquery-easing

Share Follow asked May 1, 2015 at 19:28 Sepia GodSepia God 1311 silver badge44 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You didn't add linear in the demo, and it has to be given as string or it will be considered undefined:

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

Updated fiddle

See .animate( properties, options )

easing (default: swing)

Type: String

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

Try easing:"linear" ; where "linear" is String , in quotes

jsfiddle http://jsfiddle/vs6yejag/3/