jQuery coda di animazione con allentamento comune

Question

ho animazioni jQuery che in coda per un singolo elemento:

var el = $('.elem'); 

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

I 3 conta animazione come 1 animazione principale, solo incatenato. Ci vogliono 1000ms per correre e vorrei usare nel mio esempio per la prima animazione il primo 60% di easing, poi il prossimo 30% di easing usato nella seconda animazione e finì con l'ultimo 10% di easing.

Esiste un modo per rendere l'andamento come un valore globale per queste animazioni in coda?

Answer 1

Se ho capito bene la tua domanda, forse si può avvolgere la logica in una funzione in modo da poter passare nella durata e riutilizzare l'animazione concatenata in questo modo:

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

Un altro metodo per renderlo il più plugin. Con 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)); 

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

può dare input anche come $(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() {  
       }) 
     }) 
    }) 
});