Question

I’m trying to make a css background flash between two colours. The best solution seemed to be using a recursive function shown on a similar question:

(function pulse(){
        $('#my_div').delay(100).css("background-color","blue").delay(100).css("background-color","red").delay(100).fadeIn('slow',pulse);
})();​

http://jsfiddle.net/bSWMC/223/

I can’t seem to get the background switching colours. There may be a really obvious answer here, I’m new to jQuery!

Many thanks for your help,
jeremy

Answer 1

I would just create two css classes one for each color, and than use the jquery function toggleClass and give the two css classes name i.e.

$(div).toggleClass('class1 class2')

One more thing you probably will need to use setInterval to set the timing on it to run the toggleClass. something like this (http://jsfiddle.net/Eyq5x/31/)

<div id="me" class='yellow'></div>

div
{
    height:50px;
    width:50px;
}
.yellow
{
    background-color:yellow;

}

.red
{
    background-color:red;
}
​
$(document).ready(function(){
    setInterval(
        function(){
            $('#me').toggleClass('yellow red');
        },1000);
});​