Question

假设我们有三个灯泡，我想发光第一个，保持几毫秒，关闭它，打开下一个并继续以相同的方式。

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

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

*编辑澄清：灯泡的数量是动态的

Answer 1

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

Answer 2

Javascript函数setInterval（代码，间隔）将以您的间隔重复执行代码。只需使用计数器保存变量，并使用jquery的addClass和removeClass打开和关闭灯。

Answer 3

您可以使用setTimeout之类的setTimeout（yourfuncname，3000）==等待3秒然后运行该功能。如果您需要使用动画，则jquery animate方法将完成的回调作为参数。

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( properties [, duration] [, easing] [, complete] )

   $('#clickme').click(function() {
      $('#book').animate({
      opacity: 0.25,
      left: '+=50',
    height: 'toggle'
    }, 5000, function() {
          // Here you have animated the object and the animation is complete, so 
          // you can start a new animation here
    });
  });

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

Jquery：

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/

如何获得时间安排序列在jQuery中

6 个答案: