Geek asks and answers

Css color change every second

Possible duplicate:
How to loop a css background image using jquery every few seconds?

I am wondering how to achieve a simple effect of "animating" colors that change every second, and if there is a way to animate the animation, it might be even better.

I just tried something like:

$('.box').delay(1000).css("background","red");

And it does not work at all (the delay function does not work). In any case, I need as two of them:

$('.box').delay(1000).css("background","red");
$('.box').delay(1000).css("background","green");

So that it turns red → wait a second and turns green → turns red again.

Is it possible? thank!

+1
source share
4 answers
$(document).ready(function() {  
 setInterval(function() {
    $('body').animate( { backgroundColor: 'red' }, 300)
    .animate( { backgroundColor: 'green' }, 300); 
    }, 1000);

 });

http://jsfiddle.net/theSifter/yR6jc/

+10
source 
setInterval(function() {
    var box = $('.box');
    if (box.css('background-color') == 'red') {
        box.css({'background-color':'green'});
    }
    else {
        box.css({'background-color':'red'});
    }
}, 1000);
+3
source 
<h1 id="ho">Ho ho ho!</h1>
<h2 id="mc">Merry Christmas!</h2>

<script>
    var flag = false;
    setInterval(function() {
        flag = !flag;
        $("#ho").css("background", flag ? "red" : "green");
        $("#mc").css("background", flag ? "green" : "red");
    }, 1000);
</script>
+2

, javascript setInterval:

: http://www.w3schools.com/jsref/met_win_setinterval.asp

:

setInterval(function() {
// Code to execute every second
}, 1000);
+1

More articles:


All Articles