Как сделать jQuery анимацией элемента плавно после того, как в него загрузился внешний контент?

Question

Я пробовал различные варианты на примере кода ниже:

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

... но анимация «скачки», и не является гладким. Это как функция show() предполагает, что скрытый элемент #demo был меньше, чем при загрузке новой внешней информации. В элементе #demo ничего нет, пока load() не помещает его туда, поэтому он начинается меньше, чем после загрузки внешнего содержимого.

Как я могу сделать show() «понять», что #demo на самом деле больше с загруженным контентом, так что он плавно анимируется при активации?

Answer 1

Try с помощью 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') 
}); 

страница загружается в то время как анимация будет «среднюю» скорость, чтобы показать контейнер. Используйте функцию show в обратном вызове загрузки.

.show()