jquery - 如何在 JQuery 中延迟显示/隐藏 div

Question

我有一些代码尝试在延迟后一个接一个地显示和隐藏 div。

$('#box1').delay(1800).hide('slow');
delay(1800).$('#box2').delay(1800).show('slow');
delay(1800).$('#box2').delay(1800).hide('slow');
delay(1800).$('#box3').delay(1800).show('slow');
delay(1800).$('#box3').delay(1800).hide('slow');
delay(1800).$('#box4').delay(1800).show('slow');
delay(1800).$('#box4').delay(1800).hide('slow');
delay(1800).$('#box1').delay(1800).show('slow');

div 没有显示和隐藏。如何让 div 在延迟后显示和隐藏？

Answer 1

也许更多类似的东西会更好：

// Go over each .box in the collection
$(".box").each(function ( i ) {
    $(this)
        // Show after index * 1800 (0 * 1800, 1 * 1800, 2 * 1800, etc)
        .delay( i * 1800 ).show("slow")
        // Hide after same calculation
        .delay( i * 1800 ).hide("slow");
});

只需给每个盒子.box上课。

Answer 2

用户Kevin B在评论中提出了以下建议。这照顾了我最初的答案所迎合的厄运的冗长性质/金字塔。

$('#box1').delay(1800).hide('slow').promise().then(function(){
    return $('#box2').delay(1800).show('slow').promise();
}).then(function(){
    return $('#box2').delay(1800).hide('slow').promise();
}).then(function(){
    return $('#box3').delay(1800).show('slow').promise();
}).then(function(){
    return $('#box3').delay(1800).hide('slow').promise();
}).then(function(){
    return $('#box4').delay(1800).show('slow').promise();
}).then(function(){
    return $('#box4').delay(1800).hide('slow').promise();
}).then(function(){
    return $('#box1').delay(1800).show('slow').promise();
});