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

Question

我知道如何使用回调将处理程序附加到动态内容。

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

slideDown 或 show() ?

下面是我的代码点击：

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

这是回调：

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

在上述函数的末尾，我放了 .show() 但它没有给我那种效果。

先谢谢大家了！

Answer 1

show() 如果元素未隐藏则不会做任何事情

尝试：

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

Answer 2

我相信您需要在创建 pokedex 元素后立即隐藏它。这样它就从隐藏过渡到显示。

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

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

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

In jQuery, how do I add animation effect (like slideDown) to dynamic contents?

javascript

jquery

animation

dynamic-content