Dans jQuery, comment ajouter un effet d'animation (comme slideDown) à un contenu dynamique?

Question

Je sais comment attacher un gestionnaire au contenu dynamique avec des rappels.

Je peux donc obtenir le « .pokedex » à apparaître, mais comment puis-je faire apparaître avec

slideDown ou show()?

ci-dessous est mon code clic:

$("img").click(function(){ 
    var pokeId = $(this).attr("id"); 
    $.get("http://pokeapi.co/api/v1/pokemon/"+ pokeId +"/", function(data){ 

     var imageAddress = "http://pokeapi.co/media/img/" + pokeId +".png"; 

     var pokeType = []; 

     for (var i = 0; i < data.types.length; i++) { 
      pokeType.push(data.types[i].name); 
     } 

     var pokeHeight = data.height; 
     var pokeWeight = data.weight; 

     var pokeName = data.name; 

     displayPokedex(imageAddress, pokeType, pokeHeight, pokeWeight, pokeName); 

    }, "json"); 
}) 

Voici le rappel:

function displayPokedex(img, types, height, weight, name) { 

    $(".pokedex-col").html("<div class='pokedex'></div>") 

    var htmlString = ""; 
    htmlString += "<h2>"+ name +"</h2>"; 

    htmlString += "<img src="; 
    htmlString += img; 
    htmlString += " alt='pokemon pic'>"; 

    console.log(types); 

    htmlString += "<h5>Types</h5>"; 
    htmlString += "<ul>"; 
    for (var i = 0; i < types.length; i++) { 
     htmlString += "<li>" + types[i] + "</li>"; 
    } 
    htmlString += "</ul>"; 

    htmlString += "<h5>Height</h5>"; 
    htmlString += "<h6>"+ height + "</h6>"; 

    htmlString += "<h5>Weight</h5>"; 
    htmlString += "<h6>"+ weight + "</h6>"; 

    $(".pokedex").html(htmlString).show(1000); 
} 

A la fin de la fonction ci-dessus, je mets .show() mais ça ne me donne pas cet effet.

Merci tout le monde à l'avance!

Answer 1

show() ne feront rien si l'élément est pas caché

Essayez:

$(".pokedex").hide().html(htmlString).show(1000); 

Answer 2

Je crois que vous devez cacher l'élément Pokédex dès que vous créez. De cette façon, il passe de caché à l'affichage.

Vous pouvez démarrer la fonction displayPokedex comme indiqué ci-dessous.

$(".pokedex-col").html("<div class='pokedex'></div>"); 
 
$(".pokedex").hide();