JQuery Animation Queue with General Attenuation

Question

I have a jQuery animation that is queued for a single element:

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

3 animations are counted as 1 main animation, only chained. It takes 1000 ms to start, and I would like to use the first 60% attenuation in my example for the first animation, then the next 30% attenuation used in the second animation, and ended with the last 10% attenuation.

Is there a way to do mitigation as a global value for this animation queue?

Answer 1

If I understand your question correctly, perhaps you can wrap the logic in a function so that you can pass the duration and reuse the animation chain as follows:

 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 way to make it a 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 )); 

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

may also enter input 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() { }) }) }) });