How to fade background instead of just change color

Question

I am trying to have it so my background fades to colors, not just changes. I'd also like to have it repeat if possible!

I'm using JQuery right now to change the CSS of the body.

$(document).ready(function(){
     var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
     var i = 0;
     var bgRotate = setInterval(function(){    
         $('body').css({'backgroundColor' : bgColor[[i]]});
         i++;
      }, 1000);   

     });

Here's the fiddle.

See http://stackoverflow.com/questions/190560/jquery-animate-backgroundcolor there's a jquery plugin and a CSS only answer — Ruan Mendes, Feb 14 '14 at 08:14

score 4 · Accepted Answer · answered Feb 14 '14 at 08:15

Why not use CSS3 animations for this using @keyframes as this question is also tagged as CSS so would like to post one

Everything is self explanatory, only about this line animation: demo 3s infinite linear; is nothing but a short hand of 4 properties, namely

animation-name
animation-duration
animation-iteration-count
animation-timing-function

Here, I've used infinite so it keeps iterating, and am using linear for a consistent animation.

Demo

html, body, div {
    height: 100%;
    width: 100%;
}

div {
    -webkit-animation: demo 3s infinite linear; 
    animation: demo 3s infinite linear;
}

@-webkit-keyframes demo {
    0% {
        background: #FF0000;
    }
    33% {
        background: #0f0;
    }
    100% {
        background: #f0f;
    }
}


@keyframes demo {
    0% {
        background: #FF0000;
    }
    33% {
        background: #0f0;
    }
    100% {
        background: #f0f;
    }
}

bjb568 · Answer 2 · 2014-02-14T08:18:36.683

2

Just use CSS transitions. They are much smoother than jQuery's transitions and features all of CSS' usual benefits (Cascading, no JS required, etc.)

body { transition: background-color 1s }

To make it repeat, do this:

$('body').css({'backgroundColor' : bgColor[i%bgColor.length]});

It does a remainder-of-division (modulo) operation on the array length.

edited Feb 14 '14 at 08:18

answered Feb 14 '14 at 08:09

bjb568

11,089
11
50
71

score 2 · Answer 3 · answered Feb 14 '14 at 08:14

you can do it using css3 :)

@-webkit-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
 @-moz-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
 @-ms-keyframes blink {
    0%   { background:red; }
    50%  { background:green;}
    100% { background:red; }
 }
  body{
 -webkit-animation: blink 1s infinite;
 -moz-animation:    blink 1s infinite;
 -ms-animation:     blink 1s infinite;
 }

score 1 · Answer 4 · edited May 23 '17 at 10:25

1

Look at this question

Using jQueryUI framework you can do :

$('body').animate({backgroundColor: '#FF0000'}, 'slow');

edited May 23 '17 at 10:25

Community

1
1

answered Feb 14 '14 at 08:10

Merlin

4,907
2
33
51

this one http://stackoverflow.com/questions/967815/how-do-you-fade-in-out-a-background-color-using-jquery – Merlin Feb 14 '14 at 08:12
Yes, It works now. It used to be [1], instead of a link. Or did you edit it? – bjb568 Feb 14 '14 at 08:14
1

Edited it just before you ask the comment :) – Merlin Feb 14 '14 at 08:15
Oh... That explains it. :P – bjb568 Feb 14 '14 at 08:15

score 0 · Answer 5 · answered Feb 14 '14 at 08:12

You can try to animate it with jQuery's animate() method.. Let's say that you have a DIV with the CSS setting

#yourDiv{
    background-color: #FFFFFF;
    width: 100px;
    height: 100px;
}

and you want to animate it to black color over 5 seconds, after clicking on a DIV with id darkenButton. You can use the click event:

$('#darkenButton').click(function(){
    $('#yourDiv').animate({
        background-color: '#000000'
    }, 5000); 
});

score 0 · Answer 6 · answered Feb 14 '14 at 08:13

You have to use .animate() instead of .css(). And for repeating, you have to make a function:

function changeColor(i) {
    var bgColor = ["#FF0000", "#FF00A6", "#FF00FF"];
    if(i > bgColor.length) { i = 0; }
    $('body').animate({'backgroundColor' : bgColor[[i]]});
    var bgRotate = setTimeout(function() {    
        changeColor(++i);
    }, 1000); 
}

score 0 · Answer 7 · answered Feb 14 '14 at 08:15

0

you can use simply change the var i's value when it reaches the end of array, check this http://jsfiddle.net/33VgU/3, this will repeats the backgrounds infinitely, and if you change color randomly than use Math.random function to get value of var i.

answered Feb 14 '14 at 08:15

Arjun

1,431
1
12
32

for fading you can use animate() function instead of css(). – Arjun Feb 14 '14 at 08:41
Then you should fix your answer. Or delete it because the are already answers that say that – Ruan Mendes Feb 14 '14 at 08:46

How to fade background instead of just change color

7 Answers7