Question

如何淡化第一个元素并延迟2秒然后淡化下一个元素？

在我的代码中，它将延迟2秒然后淡化所有元素在一次。

我该怎么办？

<script>
  $(document).ready(function(){
    setTimeout(function(){
        for (i = 0; i < 40; i++){
            $("#thumbnail" + i).fadeIn("slow");
        }
    }, 2000);
  });
</script>

Answer 1

你设置超时2秒然后淡入元素而没有任何延迟循环，所以它不是你想要的。

我们的想法是在setTimeout延迟后调用下一个迭代函数：

Fiddle

$(document).ready(function()
{
    var i = 0;
    (function fadeInNext()
    {
        $("#thumbnail" + i).fadeIn("slow");
        console.log("Fading in " + i);
        i++;
        if (i < 40)
        {
            setTimeout(fadeInNext, 2000);
        }
    })();
});

Answer 2

一种选择是使用.delay功能。默认情况下，.fadeIn位于效果队列中：

$(document).ready(function(){
    for (i = 0; i < 40; i++){
        $("#thumbnail" + i).delay(2000*i).fadeIn("slow");
    }
});

在这里小提琴：http://jsfiddle.net/mnh84ymk/

Answer 3

试

 $(document).ready(function () {
     for (i = 0; i < 40; i++) {
         (function (i) {
             setTimeout(function () {
                 $("#thumbnail" + i).fadeIn("slow");
             }, i * 2000);

         })(i)
     }
 });

DEMO

Answer 4

这是一个非常简单的编程问题。如果你很了解C，你就不会在这里问过它。

<script>
    $(document).ready(function(){
        $("#thumbnail0").fadeIn("slow");
        setTimeout(function(){
            for (i = 1; i < 40; i++){
                $("#thumbnail" + i).fadeIn("slow");
            }
        }, 2000);
    });
</script>

Answer 5

使用带回叫的延迟：

$(document).ready(function () {
    fadeInWithDelay(40);

    function fadeInWithDelay(times) {
        if(times == 0) return;
        $('#thumbnail' + i)
            .fadeIn('slow')
            .delay(2000)
            .queue(function (next) {
                fadeInWithDelay(--times);
            });
    }
});

Answer 6

我为你做了这个：http://jsfiddle.net/csdtesting/eym6ennz/

var i = "1";
var testimonialElements = $('div');


$('#link').click(function() {
  $('#thumbnail' + i).fadeIn('fast', function() {
    setTimeout(function() {
      console.log('#thumbnail' + i);
      for (i = 2; i <= testimonialElements.length; i++) {
        var element = testimonialElements.eq(i);
        $('#thumbnail' + i).fadeIn(1000);
      }
    }, 2000);
  });
})

#thumbnail1 {
  height: 30px;
  width: 30px;
  background: green;
  display: none;
}
#thumbnail2 {
  height: 30px;
  width: 30px;
  background: red;
  display: none;
}
#thumbnail3 {
  height: 30px;
  width: 30px;
  background: black;
  display: none;
}
#thumbnail4 {
  height: 30px;
  width: 30px;
  background: grey;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thumbnail1"></div>
<div id="thumbnail2"></div>
<div id="thumbnail3"></div>
<div id="thumbnail4"></div>
<a href="#" id="link">click me to fade in</a>

如何淡化第一个元素并延迟2秒然后淡化下一个元素？

6 个答案:

DEMO