Thêm hoạt ảnh CSS với độ trễ cho từng mục danh sách

Question

Tôi đang cố gắng viết một số câu hỏi sẽ đi qua phần tử danh sách/phần tử không được sắp xếp được chỉ định và gán lớp CSS (hoạt ảnh) cho từng mục danh sách/con. Tôi cũng muốn tạo thời gian trễ có thể điều chỉnh giữa .addClass.

Mọi thứ tôi đã thử đã thất bại thảm hại.

Ví dụ:

<ul> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

trở thành:

<ul> 
    <li class="animation">Item 1</li> 
    (50ms delay) 
    <li class="animation">Item 2</li> 
    (50ms delay) 
    <li class="animation">Item 3</li> 
    (50ms delay) 
    <li class="animation">Item 4</li> 
    (50ms delay) 
</ul> 

Bất kỳ suy nghĩ?

Answer 1

này đây hoạt động:

$('ul li').each(function(i){ 
    var t = $(this); 
    setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50); 
}); 

http://jsfiddle.net/GCHSW/1/

Answer 2

Mặc dù câu trả lời ở trên làm một công việc tốt để tiếp cận kịch bản <ul> và <li>, nó sẽ không hoạt động rất tốt cho một tình huống tiết hơn. Để thực sự quay số này vào, chức năng nên được bọc trong một hàm chấp nhận phần tử đích và trì hoãn làm đầu vào. Các chức năng sau đó sẽ mất yếu tố đó, và thiết lập một thời gian chờ với sự chậm trễ cho ... tiếng thở dài, đây là quá tham gia Tôi chỉ cần mã nó:

function applyAnimation(element, delay){ 
setTimeout(function(){ $(element).addClass('animation'); }, delay); 
var children = document.getElementById(id).children; 
for(var i = 0; i < children.length; i++){ 
    applyAnimation(children[i],(2+i) * delay);//2+i:0 fails, 1 would be parent, 2 is child 
} 
} 

Answer 3

Hãy xem xét điều này:

HTML:

<ul id="myList"> 
    <li>Item 1</li> 
    <li>Item 2</li> 
    <li>Item 3</li> 
    <li>Item 4</li> 
</ul> 

Javascript:

$("#myList li").each(function(i, li) { 
    var $list = $(this).closest('ul'); 
    $list.queue(function() { 
     $(li).addClass('animation'); 
     $list.dequeue(); 
    }).delay(50); 
}); 

Xem fiddle: http://jsfiddle.net/DZPn7/2/

01.

Mặc dù đây không phải là súc tích hay không hiệu quả, nhưng nó là một giải pháp của chủ nghĩa thuần túy jQuery.

Answer 4

Tôi có 2 cách cho hoạt ảnh (với jQuery và CSS3 Transitions + .addClass).

Vì vậy, bạn có thể thử jQuery ví dụ:

$('#myList li').each(function(i){ 
    $(this).delay(50*i).animate({opacity: 1},250); 
}); 

và sử dụng CSS3 Transitions:

$('#myList li').not('.animation').each(function(i){ 
    setTimeout(function(){ 
     $('#myList li').eq(i).addClass('animation'); 
    },50*i); 
}); 

Thưởng thức!