在jQuery中，如何將動畫效果（如slideDown）添加到動態內容中？

我知道如何使用回調將處理程序附加到動態內容。在jQuery中，如何將動畫效果（如slideDown）添加到動態內容中？

這樣我就可以得到「.pokedex」出現，但我怎麼使它看起來與

了slideDown或顯示（）？

下面是我的代碼，請點擊：

$("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（），但它不給我那種效果。

謝謝大家提前！如果元素不是隱藏

來源

2017-07-26 Jung

show()不會做任何嘗試：

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

來源

2017-07-26 16:45:42 charlietfl

你好，這是我在計算器上有史以來第一個問題，謝謝你這麼多的快速回復，你的解決方案的工作！謝謝！ – Jung

我做到了。再次感謝！ – Jung

我相信你將需要在創建它儘快隱藏圖鑑元素。這種方式從隱藏轉換到顯示。

您可以開始displayPokedex函數，如下所示。

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

來源

2017-07-26 17:11:45

非常感謝。我很感激。 – Jung

在jQuery中，如何將動畫效果（如slideDown）添加到動態內容中？

回答

相關問題