Question

我必须制作一个作为任务的委员会，像科幻电影“第三类亲密接触”一样点亮1。这里的主要目标是让特定的块以特定的顺序点亮，它们之间有2秒的间隔，这就是我现在所做的代码：

$(document).ready(function () {

    var colorBlocks = [
        'yellow',
        'green',
        'blue',
        'white',
        'orange'
    ]

    $.each(colorBlocks, function (i) {
        $('#' + this).css("background", this);
        // When you use the alert you can see the boxes change color one by one
        // alert(something);
    });

});

但这似乎不起作用，它会立刻改变所有方框的颜色，除非你警告（某事）;

任何人都可以帮忙吗？

Answer 1

我想你想要这样的东西：

$.each(colorBlocks, function (i) {
    setTimeout(function() {
        $('#' + this).css("background", this);
    }.bind(this), i * 2000);
});

为什么i * 2000？

我是迭代的索引，所以它等待i * 2000 ms每次调用下一个＆＃34;动画＆＃34;发生。

Answer 2

这应该有效

$(document).ready(function () {
    var colorBlocks = [
        'yellow',
        'green',
        'blue',
        'white',
        'orange'
    ];

    $.each(colorBlocks, function (index, key) {
          var selector = $("#" + key);
          setTimeout(function () {
               selector.css("background", key);
          }.bind(this), index * 2000);
    });
});

JSBin：https://jsbin.com/gilemuzade/1/edit

Answer 3

执行setInterval并每2秒增加一次，然后调用显示块的函数。

每个循环的setTimeout（）都不起作用

3 个答案: