點擊後，顯示一個div，等待一秒鐘，加載一些Ajax，等待一秒鐘，然後全部隱藏？

Question

我有一個函數，點擊時顯示一個div，然後等待第二個，調用一些Ajax，顯示結果，然後等待一秒鐘，然後再隱藏......

這一切似乎是工作，除了最後的隱藏部分。

我的代碼如下所示：

$('#wrap').slideDown('fast').delay(1000,function(){ 

    $.ajax({ 
    type: 'POST', 
    url: '/stuff.php', 
    cache: false, 
    success: function(data) { 

     $('#wrap').show().delay(1000,function(){ 

     $('#wrap').fadeOut('slow'); 

     }); 

    } 
    }); 

}）;

我在這裏錯過了什麼？看起來很簡單：

$('#wrap').show().delay(1000,function() { ///// } 

隱藏#wrap的回調函數應該運行。爲什麼不呢？

除此之外，我正在尋找一些機械風格的動畫，其中的slideDown發生，然後一秒後，ajax被執行......然後淡出......但似乎一切即使我在那裏有那些延遲（）函數，也會一次發生。我嘗試過使用queue（）函數，但它似乎可以躲過我的劣勢大腦。

Answer 1

「隱藏#wrap的回調函數應該運行，爲什麼不呢？」

因爲delay()^[docs]方法不接受回調。

$('#wrap').slideDown('fast') 
      .delay(1000) 
      .queue(function (nxt) { 
       $.ajax({ 
       type: 'POST', 
       url: '/stuff.php', 
       cache: false, 
       success: function (data) { 
        $('#wrap').show().delay(1000).fadeOut('slow'); 
       } 
       }); 
       nxt(); 
      }); 

它使用queue()^[docs]方法，這樣就可以鏈中的AJAX requrest

Answer 2

我希望這會有所幫助

$('#yourClickableElement').click(function() { 
    $('#wrap').slideDown(1000, function() { 
    $.ajax({ 
     type: 'POST', 
     url: '/stuff.php', 
     cache: false, 
     success: function(data) { 
     $("#wrap").show(1000).fadeOut("slow"); 
     } 
    });  
    }); 
});