jQuery hoạt hình hàng đợi với thông thường giảm bớt

Question

Tôi có jQuery hình ảnh động mà xếp hàng cho một yếu tố duy nhất:

var el = $('.elem'); 

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

3 đếm hoạt hình như 1 hoạt hình chính, chỉ cần xích. Phải mất 1000ms để chạy và tôi muốn sử dụng trong ví dụ của tôi cho hoạt ảnh đầu tiên 60% lần đầu tiên giảm bớt, sau đó giảm bớt 30% tiếp theo được sử dụng trong hoạt ảnh thứ hai và kết thúc với 10% giảm giá cuối cùng.

Có cách nào để làm giảm bớt giá trị toàn cầu cho các hoạt ảnh được xếp hàng này không?

Answer 1

Nếu tôi hiểu câu hỏi của bạn một cách chính xác, có thể bạn có thể bọc logic trong một chức năng để bạn có thể vượt qua trong thời gian và tái sử dụng các hình ảnh động xích như thế này:

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

phương pháp khác để làm cho nó như là plugin. Với 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)); 

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

có thể cung cấp nguyên liệu đầu vào quá như $(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() {  
       }) 
     }) 
    }) 
});