Hoạt hình Jquery xếp hàng

Question

Tôi có một số hoạt ảnh mà tôi muốn thực hiện trên các đối tượng khác nhau trong dom.

Tôi muốn chúng xảy ra theo thứ tự.

tôi không muốn làm điều đó như thế này:

$('#first').show(800, function() 
{ $('#second').show(800, function() {...etc...}); 

tôi muốn thêm vào tất cả các hình ảnh động của tôi (và cpu chức năng chuyên sâu) đối với một số loại đối tượng hàng đợi mà sẽ chắc chắn rằng họ thực hiện tuần tự.

Answer 1

Tôi không chắc chắn lý do tại sao bạn không muốn sử dụng phương pháp bạn mô tả. Nếu hoàn toàn từ quan điểm tổ chức, bạn không phải sử dụng các chức năng ẩn danh

function showFirst() { 
    $('#first').show(800, showSecond); 
} 

function showSecond() { 
    $('#second').show(800, showThird); 
} 

function showThird() { 
    $('#third').show(800); 
} 

function startAnimation() { 
    showFirst(); 
} 

Answer 2

Kiểm tra documentation để có hiệu ứng jQuery. Những thứ về queuing nên làm những gì bạn cần.

Answer 3

Tôi vừa mới sử dụng plugin này, http://plugins.jquery.com/project/timers, một ngày khác để thực hiện điều tương tự. Về cơ bản của bạn lặp đi lặp lại thông qua tất cả các phần tử dom phù hợp và sau đó thực hiện một hình ảnh động mỗi khi chỉ số * số mili giây của bạn.

Mã này là một cái gì đó như thế này:

HTML:

<div id="wrapper"> 
    <div>These</div> 
    <div>Show</div> 
    <div>In</div> 
    <div>Order</div> 
</div> 

jQuery

$("#wrapper div").foreach(function(i) { 
    i = i + 1; 
    $(this).oneTime(800 * i, "show", function() { 
     $(this).show(); 
    }); 
}); 

Answer 4

Điều này cũng sẽ làm việc.

  $('#first').show(800); 
      setTimeout("$('#second').show(800)", 800); 
      setTimeout("$('#third').show(800)", 1600); 
      setTimeout("$('#forth').show(800)", 2400); 

Tôi biết nó không hoàn toàn tuần tự, nhưng tôi thấy nó dễ đọc và cho phép bạn đặt hoạt ảnh linh hoạt hơn.

Lưu ý: Bạn phải trích dẫn mã bạn muốn thực hiện. Tôi đã không sử dụng bất kỳ dấu ngoặc kép trong mã trước đó, nhưng nếu bạn đã làm bạn sẽ có thể thoát khỏi chúng như sau.

  $('#first').animate({"width":"100px"}, 500); 
      setTimeout("$('#second').animate({\"width\":\"100px\"}, 500)", 800); 
      setTimeout("$('#third').animate({\"width\":\"100px\"}, 500)", 1600); 
      setTimeout("$('#forth').animate({\"width\":\"100px\"}, 500)", 2400); 

Bạn thường có thể tránh điều này bằng cách xen kẽ các trích dẫn bạn sử dụng, nhưng mặc dù nó đáng được đề cập đến.

UPDATE: Đây là một lựa chọn khác, và nó cũng đáng để thử qua jquery hứa hẹn here

  $('#first').show(800); 
      $('#second').delay(800).show(800); 
      $('#third').delay(1600).show(800); 
      $('#forth').delay(2400).show(800);