Question

I would like to have a div act like a strobe light with jquery. Basicly change the background color from black to white every 500 milliseconds.

How can I do that?

<div id="strobe"></div>

Thank you!

Answer 1

The setInterval() function is your friend here.

You don’t need to use JQuery, you can do it inn pure javascript – this is how you’d do it:

var elem = document.getElementById("strobe");
var strobeBackground = function() {
   (elem.style.backgroundColor == "white") ? elem.style.backgroundColor = "black" : elem.style.backgroundColor = "white";
}

setInterval(strobeBackground, 500);

However if you want to do it in jQuery, here it is: http://jsfiddle.net/Ru9xt/2/

The HTML would look like this:

 <div id="strobe" class="white">Hello</div>

The CSS would look like this:

.white {
    background-color: white;
}
.black {
    background-color: black;
}

And the JS is here:

setInterval(function () {
        $("#strobe").toggleClass('black');
    }, 500);