将图像延迟添加到div for for循环
问题描述:
我想添加图像添加到元素之间的一段时间。这是我的代码:将图像延迟添加到div for for循环
<script>
var aantalkeergeklikt = 0;
var uniekeid = 0;
var pictures = ["../Spel in jQuery/img/bubbles/bom.png", "../Spel in jQuery/img/bubbles/green.png", "../Spel in jQuery/img/bubbles/red.png", "../Spel in jQuery/img/bubbles/yellow.png", "../Spel in jQuery/img/bubbles/orange.png", "../Spel in jQuery/img/bubbles/purple.png", "../Spel in jQuery/img/bubbles/blue.png"];
var size = pictures.length
for (i = 0; i < 20; i++) {
uniekeid = uniekeid + 1;
var x = Math.floor(size * Math.random())
var item = $("<img src='" + pictures[x] + "' alt='" + uniekeid + "' />").hide().delay("slow").fadeIn();
$('#depionnen').append(item);
console.log(item.alt);
}
</script>
此时,在添加所有图像后应用延迟。
有人可以帮助我吗?
答
你必须使用setTimeout来延迟for循环。
var i = 1; // set your counter to 1
function myLoop() { // create a loop function
setTimeout(function() { // call a 3s setTimeout when the loop is called
alert('hello'); // your code here
i++; // increment the counter
if (i < 10) { // if the counter < 10, call the loop function
myLoop(); // .. again which will trigger another
} // .. setTimeout()
}, 3000)
}
myLoop(); // start the loop
所以,在你的榜样,将是这样的:
var i = 1;
function myLoop() {
setTimeout(function() {
uniekeid = uniekeid + 1;
var x = Math.floor(size * Math.random())
var item = $("<img src='" + pictures[x] + "' alt='" + uniekeid + "' />").hide().delay("slow").fadeIn();
$('#depionnen').append(item);
console.log(item.alt);
i++;
if (i < 20) {
myLoop();
}
}, 3000)
}
myLoop();
答
下面是这类问题的通用解决方案:
function nextPic() {
if(pictures.length) {
var item = $('<img src="' + pictures.shift() + '">')
.hide()
.delay('slow')
.fadeIn(nextPic);
$('#depionnen').append(item);
}
} //nextPic
nextPic();
答
jQuery.delay()
只会延迟对同一元素的影响。 尝试使用setTimeout()
代替,这将是这个样子:
for (i = 0; i < 20; i++) {
uniekeid = uniekeid + 1;
var x = Math.floor(size * Math.random())
var item = $("<img src='" + pictures[x] + "' alt='" + uniekeid + "' />").hide();
$('#depionnen').append(item);
setTimeout(function(item){ item.fadeIn(); }, i*600, item);
}
谢谢!它现在有效。 – 2015-04-04 13:18:21
考虑接受别人知道的答案;) – Bram 2015-04-04 13:20:53