Search code examples
javascriptjqueryjquery-animateeasingjquery-easing

Adding linear easing to animation


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/


Solution

  • 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