我想在将图像添加到元素之间添加一些时间。这是我的代码:
<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>
此时,在添加所有图像后应用延迟。
有人可以帮我这个吗?
答案 0 :(得分:0)
你必须使用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();
答案 1 :(得分:0)
以下是此类问题的一般解决方案:
function nextPic() {
if(pictures.length) {
var item = $('<img src="' + pictures.shift() + '">')
.hide()
.delay('slow')
.fadeIn(nextPic);
$('#depionnen').append(item);
}
} //nextPic
nextPic();
答案 2 :(得分:0)
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);
}