2015-11-10 31 views
0

我想使用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> 
+0

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

+0

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

+0

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

回答

0

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

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

希望這有助於!

+0

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

1

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

$(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; 
     }); 
    }); 
}); 
相關問題