如何獲得顯示一個接一個的選項

我想使用jQuery的顯示和延遲獲得3個按鈕來顯示一個接一個，但我覺得我可能會試圖從錯誤的角度來攻擊這個。如何獲得顯示一個接一個的選項

$(document).ready(function(){ 
    $("#menu-button").click(function(){ 
     $("#menu").show().delay(1000); 
     $("#option1").show().delay(500); 
     $("#option2").show().delay(500); 
     $("#option3").show().delay(500); 
    }); 
});

是我現在所擁有的。

所以我想要發生的是，當用戶按下ID爲「menu-button」的按鈕時，ID爲「menu」的div將顯示出來，然後每個選項都會依次顯示。

但是，發生什麼事是當我按菜單按鈕菜單和選項都顯示一次。

我還沒有真正使用過jQuery，所以我可能在這裏做錯了什麼。

任何幫助將不勝感激，因爲我也試過，我雖然文件在做，暗示沒有工作：

$(document).ready(function(){ 
    $("#menu-button").click(function(){ 
     $("#menu").delay(1000).show(); 
     $("#option1").delay(1500).show(); 
     $("#option2").delay(2000).show(); 
     $("#option3").delay(2500).show(); 
    }); 
});

編輯：

<body> 
<span id="menu-button">TEST</span> 
<div class="mobMenu hidden" id="menu"> 
<button class="hidden" id="option1">1</button> 
<button class="hidden" id="option2">2</button> 
<button class="hidden" id="option3">3</button> 
</div> 
</body>

來源

2015-11-10 Jordan

查找到鏈中的暴露更簡單的方法（）。 http://api.jquery.com/deferred.done/這將做的是等待動畫完成，然後再調用完成的回調繼續。 – Taplar

您可以將HTML添加到問題中。 –

添加了HTML，因爲我不認爲這是需要的，所以留下了它 – Jordan

你可以通過顯示功能完成後調用的功能：

$(document).ready(function(){ 
    $("#menu-button").click(function(){ 
     $("#menu").show(1000, function() { 
      $("#option1").show(1500, function() { 
       //And so on. 
      }); 
     }); 
    }); 
});

希望這有助於！

來源

2015-11-10 13:36:11 Ele

在我看來，它不太乾淨，但我不能說它不起作用:) 感謝一堆！ – Jordan

這可能是完成相同的任務在使用完成

$(document).ready(function(){ 
    var delay = 1000; 
    var items = [ 
     '#menu', '#option1', '#option2', '#option3' 
    ]; 

    $("#menu-button").click(function(){ 
     $.each(items, function(index, item){ 
      $(item).show().delay(delay); 
      delay += 500; 
     }); 
    }); 
});

來源

2015-11-10 13:36:18 stackoverfloweth

如何獲得顯示一個接一個的選項

回答

相關問題