jQuery animacja kolejka z common złagodzenie

Question

Mam animacje jQuery, który w kolejce do jednego elementu:

var el = $('.elem'); 

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

The 3 liczy się jak 1 animacja głównej animacji, tylko łańcuch. Zajmuje 1000ms i chciałbym użyć w moim przykładzie do pierwszej animacji pierwszych 60% luzowania, a następnie do łagodzenia kolejnych 30% użytych w drugiej animacji i zakończyło się ostatnim 10% luzowania.

Czy istnieje sposób na złagodzenie jako wartość globalną dla tych animacji w kolejce?

Answer 1

Jeśli dobrze rozumiem pytanie, może można zawinąć logiki w funkcji, dzięki czemu można przejść w czasie i ponownie wykorzystać przykuty animację tak:

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

Innym sposobem, aby go jako wtyczki. Z 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)); 

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

może dać wejść też jako $(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() {  
       }) 
     }) 
    }) 
});