Adding linear easing to animation

Question

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

score 4 · Accepted Answer · answered May 01 '15 at 19:37

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

answered May 01 '15 at 19:37

Spot on, thanks a lot. Knew I was close to getting it, I had also tried that! But just hadn't used speech marks around it. – Sepia God May 01 '15 at 20:20

score 1 · Answer 2 · answered May 01 '15 at 19:36

1

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.net/vs6yejag/3/

answered May 01 '15 at 19:36

guest271314

1
15
104
177

Adding linear easing to animation

2 Answers2