私は現在、単純なWebサイトで作業しており、ある画像から別の画像にフェードインする単純なスライドショーを設定しようとしています。私が現在設定している方法では、JQueryを使用してすべての画像をフォルダーからhtmlに(動的に)ロードします。
(phpを介して)画像名のリストを取得し、各画像のhtmlを追加するようにしています(画像は各画像の名前の配列にすぎません):
for(var i = 0; i < images.length; i++) {
$('#slideshow').append('<img id="\"slide' + i + '\"" src="animations/' + images[i] + '" style=\"display: none;\"/>');
}
次に、このメソッドを呼び出します。このメソッドは、それらを循環するために開始(および継続)する必要があります。動的にロードされた画像なしで動作しましたが、動的コンテンツで.cssまたは.fadeInを使用できないため、スタックしています。
function countDown() {
setTimeout(countDown, 4000);
lastSlideNum = count;
count++;
if(count > images.length)
count = 0;
currentSlideNum = count;
//This next part never gets called because it can't access the dynamically created img
$("#slide" + lastSlideNum).fadeOut('slow', function() {
$(this).css("display", "none");
$("#slide" + currentSlideNum).fadeIn('slow');
});
}
私はそれがおそらく物事を行うためのきれいなまたは最も簡単な方法ではないことを理解していますが、これに関するアドバイスは大いに役立ちます。私はJQueryを初めて使用するので、これについてもっと簡単な方法がある場合はお知らせください。
TL; DR:動的にロードされたコンテンツをフェードインおよびフェードアウトするための回避策はありますか?