javascript - 如何在 jQuery 中正确获取时间和顺序

Question

假设我们有三个灯泡，我想点亮第一个，保持几毫秒，关闭它，打开下一个，然后以同样的方式继续。

通过添加和删除一个类来打开和关闭灯泡。我如何实现这一目标？

PS我用灯泡只是为了让我的问题更清楚。基本上我需要的是，如何将类添加到 div，保留一段时间，删除类，将类应用到另一个 div，保留一段时间并删除它等等......

*编辑说明：灯泡的数量是动态的

Answer 1

您可以使用 setInterval 和 jquery 选择器的简单组合检查这个小提琴http://jsfiddle.net/aqXtL/1/

Answer 2

Javascript 函数 setInterval(code, interval) 将按照您的时间间隔重复执行代码。只需保留一个带有计数器的变量，并使用 jquery 的 addClass 和 removeClass 来打开和关闭灯。

Answer 3

您可以使用setTimeout之类的 setTimeout(yourfuncname, 3000) == 等待 3 秒，然后运行该函数。如果您需要使用动画，则 jqueryanimate方法将完成回调作为参数。

Answer 4

非常简化的例子...

function startDimming(){
  setTimeout(_interval,function(){
    // Remove all "glowing" bulbs.
    // Add class to first "bulb".
    setTimeout(_interval,function(){
      // Remove all "glowing" bulbs.
      // Add class to second "bulb".
      setTimeout(_interval,function(){
        // Remove all "glowing" bulbs.
        // Add class to last "bulb".
        startDimming();
      });
    });
  });
}

Answer 5

您可以使用 jquery 的动画并使用完整的功能来完成其他任务。

.animate（属性[，持续时间] [，缓动] [，完成]）

   $('#clickme').click(function() {
      $('#book').animate({
      不透明度：0.25，
      左：'+=50'，
    高度：'切换'
    }, 5000, 函数() {
          // 这里你已经为对象设置了动画并且动画完成了，所以
          // 你可以在这里开始一个新的动画
    });
  });

Answer 6

HTML：

<div class="bulb"> </div>
<div class="bulb"> </div>
<div class="bulb"> </div>

CSS：

.bulb {
    width: 50px;
    height: 100px;
    border: 2px #000 solid;
    float: left;
    margin: 10px;
}
.bulb.on {
    background: #ff0;
}

查询：

var timer;
function light ( i ) {
    i = i % $(".bulb").length;
    $(".bulb").eq(i).addClass("on").siblings().removeClass("on");
    timer = setTimeout(function(){
        light( ++i );
    }, 1000);
}
$(document).ready( function() {
    light(0);
});

编辑：这是一个工作示例，http://jsfiddle.net/QdWgM/