CODEWITHSUNDEEP
jqueryhtmlcss
Oontzie
Oontzie

Reputation: 37

How to fade background instead of just change color

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.

Upvotes: 1

Views: 484

Answers (7)

bjb568
bjb568

Reputation: 11498

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.

Upvotes: 2

Arjun
Arjun

Reputation: 1439

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.

Upvotes: 0

Mr. Alien
Mr. Alien

Reputation: 157404

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;
    }
}

Upvotes: 4

Alyssa Reyes
Alyssa Reyes

Reputation: 2439

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;
 }

Upvotes: 2

Tommi Halonen
Tommi Halonen

Reputation: 248

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); 
}

Upvotes: 0

Dropout
Dropout

Reputation: 13866

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); 
});

Upvotes: 0

Merlin
Merlin

Reputation: 4927

Look at this question

Using jQueryUI framework you can do :

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

Upvotes: 1

Related Questions