延迟将图像添加到div for for循环中

时间:2015-04-04 12:58:27

标签: jquery image delay

我想在将图像添加到元素之间添加一些时间。这是我的代码:

    <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>

此时,在添加所有图像后应用延迟。

有人可以帮我这个吗?

3 个答案:

答案 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

Source

所以在你的例子中它会是这样的:

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();

Working Fiddle

答案 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);
}

演示:http://jsfiddle.net/5eygxdv1/