Javascript 在jQuery中，如何向动态内容添加动画效果（如slideDown）？

我知道如何通过回调将处理程序附加到动态内容

所以我可以让“.pokedex”出现，但是我如何让它出现在

向下滑动或显示（）

下面是我的代码点击：

 $("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");
})

$（“img”）。单击（函数（）{
var pokeId=$（this.attr（“id”）；
$.get（”http://pokeapi.co/api/v1/pokemon/“+pokeId+”/”，函数（数据）{
var imageAddress=”http://pokeapi.co/media/img/“+pokeId+”.png”；
var pokeType=[]；
对于（var i=0；i

以下是回调：

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);
}

功能显示pokedex（img、类型、身高、体重、姓名）{
$（“.pokedex col”）.html（“”）
var htmlString=“”；
htmlString+=“”+名称+“”；
htmlString+=“”；
console.log（类型）；
htmlString+=“类型”；
htmlString+=“
”；
对于（变量i=0；i”+类型[i]+“”；
}
htmlString+=“
”；
htmlString+=“高度”；
htmlString+=“”+高度+“”；
htmlString+=“重量”；
htmlString+=“”+权重+“”；
$（“.pokedex”）.html（htmlString）.show（1000）；
}

在上述函数的末尾，我放置了.show（），但它没有给我这种效果

提前谢谢大家

show（）

如果元素未隐藏，则不会执行任何操作

尝试：

---

我相信您需要在创建pokedex元素后立即隐藏它。通过这种方式，它从隐藏过渡到显示

您可以开始displayPokedex功能，如下所示

$（“.pokedex col”）.html（“”）；
$（“.pokedex”）.hide（）嗨，这是我第一个关于StackOverflow的问题，非常感谢您的快速回复，您的解决方案很有效！谢谢是的。再次感谢！谢谢。我很感激。
$(".pokedex").hide().html(htmlString).show(1000);