JQuery：內容加載不會等待動畫完成

Question

$("#clickme").click(
      function(){ 
       $(this).slideToggle(1000); 
       $(this).load("MYTEXT.txt"); 
       $(this).slideToggle(1000); 
      } 
     ) 

我希望我的HTML元素的新內容在第一個動畫完成後才顯示。這段代碼發生的事情是，它首先向上滑動，然後用新的內容向下滑動，但新內容在滑動效果完成之前顯示！

我該如何解決這個問題？

Answer 1

$("#clickme").click( 
      function(){ 
       $(this).slideToggle(1000, function() { 
        $(this).load("MYTEXT.txt", function() { 
         $(this).slideToggle(1000); 
        }); 
       });  
      }  
     ) 

爲了讓事情發生後，海誓山盟，您可以使用回調來運行代碼只有在前一個函數運行之後（這對動畫和AJAX調用非常有用）。

Answer 2

你將不得不鏈他們作爲回調

$("#clickme").click(function(){ 
    $(this).slideToggle(1000, function(){ 
     $(this).load("MYTEXT.txt", function(){ 
      $(this).slideToggle(1000); 
     }); 
    }); 
}); 

Answer 3

試試這個：

$("#clickme").click(
      function(){ 
       $(this).slideToggle(1000).load("MYTEXT.txt").slideToggle(1000); 
      } 
     ) 

Answer 4

$("#clickme").click(function(){ 
     $(this).slideToggle(1000, function() { 
      $(this).load("MYTEXT.txt", function() { 
       $(this).slideToggle(1000); 
      }); 
     }); 
});