Comment faire en sorte que jQuery anime facilement un élément après le chargement d'un contenu externe?

Question

J'ai essayé différentes variantes de l'exemple de code ci-dessous:

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

... mais l'animation « sauts », et n'est pas lisse. C'est comme si la fonction show() supposait que l'élément caché #demo était plus petit que les nouvelles informations externes qui y étaient chargées. Il n'y a rien dans l'élément #demo jusqu'à ce que load() l'y mette, donc il commence plus petit qu'après le chargement du contenu externe.

Comment puis-je faire show() "comprendre" que #demo est en fait plus grand avec le contenu chargé, donc il s'anime en douceur lorsqu'il est activé?

Answer 1

Essayez d'utiliser le complete callback function dans .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') 
}); 

La page se charge alors que l'animation va la vitesse "moyenne" pour montrer le récipient. Utilisez la fonction show dans le rappel de load.

.show()