Chuỗi hoạt ảnh không lồng nhau trong jQuery?

Question

Tôi đang cố gắng tạo một chuỗi hoạt ảnh với jQuery nơi một hoạt ảnh bắt đầu sau khi hoạt ảnh trước được thực hiện. Nhưng tôi không thể quấn đầu quanh nó được. Tôi đã cố gắng sử dụng jQuery.queue, nhưng tôi không nghĩ rằng tôi có thể sử dụng nó bởi vì nó có vẻ có một hàng đợi riêng lẻ cho mỗi phần tử trong mảng jQuery.

tôi cần một cái gì đó như:

$('li.some').each(function(){ 
    // Add to queue 
    $(this).animate({ width: '+=100' }, 'fast', function(){ 
     // Remove from queue 
     // Start next animation 
    }); 
}); 

Có cách nào jQuery để làm điều này hay tôi phải viết và xử lý hàng đợi riêng tôi cách thủ công?

Answer 1

Bạn có thể tạo ra một tùy chỉnh .queue() để tránh sự làm tổ vô hạn ..

var q = $({}); 

function animToQueue(theQueue, selector, animationprops) { 
    theQueue.queue(function(next) { 
     $(selector).animate(animationprops, next); 
    }); 
} 

// usage 
animToQueue(q, '#first', {width: '+=100'}); 
animToQueue(q, '#second', {height: '+=100'}); 
animToQueue(q, '#second', {width: '-=50'}); 
animToQueue(q, '#first', {height: '-=50'}); 

Demo tại http://jsfiddle.net/gaby/qDbRm/2/

---

Nếu, Mặt khác, bạn muốn thực hiện cùng một hoạt ảnh cho nhiều yếu tố trên e sau khi khác sau đó bạn có thể sử dụng chỉ mục của họ để .delay() hình ảnh động của mỗi yếu tố trong suốt thời gian của tất cả những người trước đây ..

$('li.some').each(function(idx){ 
    var duration = 500; 
    $(this).delay(duration*idx).animate({ width: '+=100' }, duration); 
}); 

Demo tại http://jsfiddle.net/gaby/qDbRm/3/

Answer 2

Các callback của .animate() thực sự chấp nhận khác .animate(), vì vậy tất cả các bạn sẽ phải làm sẽ là

$(this).animate({ width: '+=100' }, 'fast', function(){ 
     $(selector).animate({attr: val}, 'speed', function(){ 
}); 
    }); 

và vân vân.

Answer 3

Bạn có thể gọi cho người tiếp theo một cách đệ quy.

function animate(item) { 
    var elem = $('li.some').eq(item); 
    if(elem.length) { 
     elem.animate({ width: '+=100' }, 'fast', function() { 
      animate(item + 1); 
     }); 
    } 
} 

animate(0); 

Answer 4

tại sao không xây dựng hàng đợi?

var interval = 0; //time for each animation 
var speed = 200; 

$('li.some').each(function(){ 
    interval++; 
    $(this).delay(interval * speed).animate({ width: '+=100' }, speed); 
}); 

EDIT: thêm tốc độ param

Answer 5

Nhờ mọi người trả lời!

Tôi nghĩ tôi nên chia sẻ kết quả của câu hỏi của mình. Đây là một plugin jQuery slideDownAll đơn giản trượt xuống một mục cùng một lúc thay vì tất cả cùng một lúc.

(function ($) { 

    'use strict'; 

    $.fn.slideDownAll = function (duration, callback) { 

     var that = this, size = this.length, animationQueue = $({}); 

     var addToAnimationQueue = function (element, duration, easing, callback) { 
      animationQueue.queue(function (next) { 
       $(element).slideDown(duration, easing, function() { 
        if (typeof callback === 'function') { 
         callback.call(this); 
        } 
        next(); 
       }); 
      }); 
     }; 

     return this.each(function (index) { 
      var complete = null, 
       easing = 'linear'; 
      if (index + 1 === size) { 
       complete = callback; 
       easing = 'swing'; 
      } 
      addToAnimationQueue(this, duration/size, easing, complete); 
     }); 
    }; 

} (jQuery)); 

Không kiểm tra rất tốt, nhưng dù sao đi nữa.

Tận hưởng !!