如何在jQuery中正确获取时序和序列

Question

Assume we have three light bulbs, and I want to glow the first one, keep it on for a few milliseconds, turn it off, turn on the next and continue in the same way.

Turning the light bulbs on and off is done by adding and removing a class. How do I achieve this?

PS I used light bulbs just to make my question clearer. Basically what I need is, how to add a class to a div, keep it for some time, remove class, apply a class to another div, keep it for some time and remove it and so on...

*Edit Clarification: The number of bulbs is dynamic

Answer 1

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

Answer 2

The Javascript function setInterval(code, interval) will repeatedly execute code with your interval. Just keep a variable with a counter, and use jquery's addClass and removeClass to turn the lights on and off.

Answer 3

you can use setTimeout like setTimeout(yourfuncname, 3000) == wait 3 seconds then run that function. If you need to use animations then the jquery animate method has a completed callback as a parameter.

Answer 4

very simplified example...

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

You can use the animation of jquery and use the complete function to do other tasks.

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

Edit : here's a working sample, http://jsfiddle.net/QdWgM/