CODEWITHSUNDEEP
javascriptjqueryjquery-animateeasingjquery-easing
Sepia God
Sepia God

Reputation: 13

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/

Upvotes: 0

Views: 6728

Answers (2)

user1693593
user1693593

Reputation:

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

Upvotes: 4

guest271314
guest271314

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

Upvotes: 1

Related Questions