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

我相信你需要在创建它时立即隐藏它。这样它就会从隐藏转变为显示。

您可以开始displayPokedex函数，如下所示。

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

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

2 个答案: