淡入JQuery中动态加载的内容
淡入JQuery中动态加载的内容
提问于 2013-01-30 09:31:10
我目前在一个简单的网站上工作，我试图建立一个简单的幻灯片放映，从一个图像到另一个淡入淡出。按照我目前设置的方式，它将使用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:有没有办法淡入和淡出动态加载的内容？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-01-30 09:50:38
在这里试试我的演示：http://jsfiddle.net/QAa7a/
这个想法是使用$(“#幻灯片放映img:nth-child(”+ lastSlideNum +“)”)进行查询：
function countDown() {
setTimeout(countDown, 4000);
lastSlideNum = count + 1;
count++;
if(count >= images.length)
count = 0;
currentSlideNum = count + 1;
//This next part never gets called because it can't access the dynamically created img
console.log(lastSlideNum + "?" + $("#slide" + lastSlideNum).length);
$("#slideshow img:nth-child(" + lastSlideNum + ")").fadeOut('slow', function() {
$(this).css("display", "none");
$("#slideshow img:nth-child(" + currentSlideNum + ")").fadeIn('slow');
});
}如果您不熟悉第n个子选择器，请检查此链接：http://api.jquery.com/nth-child-selector/
Stack Overflow用户
发布于 2013-01-30 09:50:32
你没有以一种非常jQuery的方式来处理所有的索引号之类的事情。你可以在这里大大简化。没有理由不能访问使用jQuery动态添加到DOM中的元素。
for(var i = 0; i < images.length; i++) {
$('#slideshow').append('<img class="rotating_image" src="animations/' + images[i] + '" style="display: none;"/>');
}
var slide_interval = 4000;
continue = true;
while (continue === true) {
$('.rotating_image').each( function() {
$(this).fadeIn('slow').delay(slide_interval).fadeOut('slow');
});
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14595221
复制相关文章
相似问题
腾讯云开发者
