JQuery的延遲幾個div的

Question

我有以下代碼：http://jsfiddle.net/S5xLM/

隨着2個延遲和setTimeout(function(){ }

第一延時工作，但第二個將無法工作。

顯示的當前對象是灰色框。 延遲後應顯示下一個對象（藍框）。 最後經過另一次延遲，綠色框應顯示。

因此，而不是（像現在）：灰色 - 延遲 - >藍

我想：格雷 - 延遲 - >藍 - 延遲 - >綠色。

謝謝。

Answer 1

輕微的modification到你的小提琴會得到你想要的效果。

$('#object1').click(function() { 
    setTimeout(function() { 
     $('#object1').hide(); 
     $('#object2').show();   
     setTimeout(function() { 
      $('#object2').hide(); 
      $('#object3').show(); 
     }, 1000) 
    }, 1000); 
}); 

Answer 2

使用：

$(document).ready(function() { 
    $('#object2').hide(); 
    $('#object3').hide(); 
    $('#object1').click(function() { 
     setTimeout(function() { 
      $('#object1').hide(); 
      $('#object2').show(); 
     }, 1000); 
     setTimeout(function() { 
      $('#object2').hide(); 
      $('#object3').show(); 
     }, 1500); 
    }); 
}); 

Answer 3

試試這個http://jsfiddle.net/aamir/S5xLM/2/

$(document).ready(function() { 
    $('#object2').hide(); 
    $('#object3').hide(); 
    $('#object1').click(function() { 
     setTimeout(function(){ 
      $('#object1').hide(); 
      $('#object2').show(); 
      setTimeout(function(){ 
       $('#object2').hide(); 
       $('#object3').show(); 
      },2000); 
     },2000); 
    }); 
});