jQuery的動畫隊列具有共同緩和

Question

我有jQuery的動畫，排隊用於單個元件：

var el = $('.elem'); 

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

3個動畫算作1個主動畫，只是鏈的。運行需要1000ms，我想在第一個動畫中使用第一個動畫的60％寬鬆，然後在第二個動畫中使用下一個30％的寬鬆，最後10％的寬鬆結束。

有什麼方法可以將緩動作爲這些排隊動畫的全局值嗎？

Answer 1

如果我正確理解你的問題，也許你可以用一個函數的邏輯，所以你可以在時間傳遞和重用鏈式動畫是這樣的：

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

另一種方法，使之作爲插件。隨着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)); 

使用 HTML：<span>This is test line to to work on animate plugin ease</span> JS：$(document).ready(function(){ $('span').ease() });

可以給投入太多的$(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() {  
       }) 
     }) 
    }) 
});