bị trì hoãn thêm lớp/xóa lớp chức năng không hoạt động

Question

Tôi đang làm gì ở đây?

$(function() { 
$('ul li:nth-child(1)').addClass("go").delay(4500).removeClass("go"); 
$('ul li:nth-child(2)').addClass("go").delay(1500).removeClass("go"); 
$('ul li:nth-child(3)').addClass("go").delay(500).removeClass("go"); 
$('ul li:nth-child(4)').addClass("go").delay(4500).removeClass("go"); 
$('ul li:nth-child(5)').addClass("go").delay(1000).removeClass("go"); 
}); 

Answer 1

.delay() chỉ được thiết kế để hoạt động với hoạt ảnh. Bạn sẽ phải nghỉ mát để sử dụng setTimeouts thường xuyên cho những gì bạn đang thực hiện:

var li = $('ul li:nth-child(1)').addClass('go'); 
setTimeout(function() { 
    li.removeClass('go'); 
}, 4500); 

Để làm điều này để mỗi <li> một chút dễ chịu hơn, bạn có thể cấu trúc mã của bạn như sau:

$(function() { 
    var delays = [4500, 1500, 500, 4500, 1000]; 
    $('ul li').addClass('go').each(function (i) { 
     setTimeout(function (li) { 
      li.removeClass('go'); 
     }, delays[i], $(this)); 
    }); 
}); 

Answer 2

Chỉ cần thêm, bạn có thể sử dụng một số .queue:

$('ul li:nth-child(1)').addClass("go") 
         .delay(4500) 
         .queue(function() { 
          $(this).removeClass("go"); 
          $(this).dequeue(); 
         });