Question

In html:
<div id="rec_block"></div>

In CSS

#rec_block{
position: absolute;
top: 340px;
left: 615px;
width: 100px;
height: 100px;
background-color: red;
visibility: hidden; 
}

var rec_block= $('#rec_block');
rec_block.css('visibility',"visible");
setInterval
(
    function()
    {           
        rec_block.css('background-color',"red");
        rec_block.css('background-color',"green");          
    }           
,1000
);

Basically, it will have the glowing effect: change color from red to green and
green to red, but it only changes red to green and nothing happens…

What’s wrong with that?

UPDATE: Please explain why the above code can’t work…Thanks.

Answer 1

That’s because color changing happens too fast and you cannot see the terrible(sorry), not-user-friendly effect, you can use setTimeout function.

setInterval(function() {
    rec_block.css('background-color', "red");
    setTimeout(function(){
        rec_block.css('background-color', "green");
    }, 500)
}, 1000);

http://jsfiddle.net/S8zNX/

An alternative is:

setInterval(function() {
    rec_block.css('background-color', function(i, c){
        return c === 'rgb(255, 0, 0)' ? 'green' : 'red'
    });
}, 1000);

http://jsfiddle.net/9RXw9/