如何讓jQuery在外部內容加載之後順暢地爲元素設置動畫效果？

Question

我試過下面的代碼示例的不同變化：

$(document).ready(function(){ 
    $('#demo').hide(); 
    $("button").click(function(){ 
     $("#demo").load("demo.php").show('medium'); 
    }); 
}); 

...但動畫「跳躍」，而並不順利。這就像show()函數假設隱藏的#demo元素比裝入新外部信息時小。 #demo元素中沒有任何內容，直到load()將它放到那裏，所以它開始時小於在將外部內容加載到它之後。

我該如何讓show()「明白」#demo實際上是在其中加載的內容較大，因此啓動時它的動畫流暢嗎？

Answer 1

嘗試使用complete callback function在.load()

$(document).ready(function(){ 

    var demo = $('#demo'); 

    demo.hide(); 
    $("button").click(function(){ 
     demo.load('demo.php', function() { 
      demo.show('medium'); 
     }); 
    }); 
}); 

Answer 2

$("#demo").load("demo.php",function() { 
    $("#demo").show('medium') 
}); 

頁面加載時的動畫會「中」速度出示容器。在load的回調中使用show函數。

.show()