CODEWITHSUNDEEP
javascriptjqueryanimationdynamic-content
Jung
Jung

Reputation: 209

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

I know how to attach handler to the dynamic contents with callbacks.

So I can get the ".pokedex" to appear but how do I make it appear with

slideDown or show() ?

Below is my code click:

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

Here is the callback:

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

At the end of the above function, I put .show() but it doesn't give me that effect.

Thanks everyone in advance!

Upvotes: 1

Views: 53

Answers (2)

APatrick
APatrick

Reputation: 13

I believe you will need to hide the pokedex element as soon as you create it. This way it transitions from hidden to showing.

You can begin the displayPokedex function as shown below.

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

Upvotes: 0

charlietfl
charlietfl

Reputation: 171669

show() won't do anything if the element is not hidden

Try:

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

Upvotes: 2

Related Questions