jQuery animation queue with common easing

Question

I have jQuery animations which queued up for a single element:

var el = $('.elem');

el.animate({
        width: 120
    },
    600,
    'easeInOutQuint'
).animate({
        width: 90
    },
    300,
    'easeInOutQuint'
).animate({
        width: 100
    },
    100,
    'easeInOutQuint'
);

The 3 animation counts as 1 main animation, just chained. It takes 1000ms to run and I would like to use in my example for the first animation the first 60% of the easing, then the easing next 30% used in the second animation and it finished with the last 10% of the easing.

Is there any way to make the easing as a global value for these queued animations?

Answer 1

If I understand your question correctly, maybe you can wrap the logic in a function so you can pass in the duration and reuse the chained animation like this:

var el = $('.elem');

var ease = function(elem, duration) {
    elem
    .animate({width: 120}, 0.6 * duration, 'easeInOutQuint')
    .animate({width:  90}, 0.3 * duration, 'easeInOutQuint')
    .animate({width: 100}, 0.1 * duration, 'easeInOutQuint');
}

ease(el, 1000);

Answer 2

Another method to make it as plugin. With Fiddle

(function ( $ ) {
    $.fn.ease = function( options ) {
        var settings = $.extend({
            // These are the defaults.
            style: "swing",
            duration : 1000
        }, options );

        return this.each(function(){
            $(this)
            .animate({width: 120}, 0.6 * settings.duration, settings.style)
            .animate({width:  90}, 0.3 * settings.duration, settings.style)
            .animate({width: 100}, 0.1 * settings.duration, settings.style);
        }); 
    };
}( jQuery ));

usage html : <span>This is test line to to work on animate plugin ease</span> js : $(document).ready(function(){ $('span').ease() });

can give inputs too as $(element).ease({duration:2000});

Answer 3

The simplest way to do this is keep it nested like:

$( "#clickme" ).click(function() {
  $( "#book" ).animate({
    width: "140px"

  }, 5000, "", function() {
       $( "#note" ).animate({
          width: "100px"    
             }, 4000, "", function() {   
                $("#note2").animate({
                    width: "60px"

                    }, 2000, "", function() {    
               }) 
       })
  })
});