How to get timing & sequence right in jQuery

How to get timing & sequence right in jQuery

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?

P.S. 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 by Dominic Tobias for How to get timing & sequence right in jQuery

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 by Lix for How to get timing & sequence right in jQuery

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 by Andiih for How to get timing & sequence right in jQuery

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 by DadViegas for How to get timing & sequence right in jQuery

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 by KBN for How to get timing & sequence right in jQuery

HTML :

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/

Answer by Sethunath for How to get timing & sequence right in jQuery

You can use a simple combination of setInterval and jquery selecors Check this fiddle http://jsfiddle.net/aqXtL/1/

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72