Comments on: It’s a Rainbow! – Color Changing Text and Backgrounds w/ jQuery

By: Vitaminico

Vitaminico — Sun, 05 May 2013 10:49:47 +0000

i’ve the same question!

By: Paul

Paul — Mon, 15 Apr 2013 14:34:00 +0000

Hi ! Thanks a lot for this tutorial !
But if I want to use this with specifics colors, not random ? How can I do ?

By: Kicoe

Kicoe — Tue, 05 Mar 2013 17:51:13 +0000

Hi,
if I may, I’ve work on a plugin to do that :
Hope it’ll help others who run into this thread…

By: jQuery Effects Gallery

jQuery Effects Gallery — Fri, 15 Feb 2013 23:43:12 +0000

[...] 65. It’s a Rainbow! – Color Changing Text and Backgrounds [...]

By: Hoang

Hoang — Fri, 04 Jan 2013 15:59:08 +0000

change code:
function spectrum(){
var hue = ‘rgb(‘ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘,’ + (Math.floor(Math.random() * 256)) + ‘)’;
$(‘#div’).animate( { backgroundColor: hue }, 1000);
// spectrum(); // it stop jquery
setTimeout(spectrum, 100); // new code
}

By: Ramin

Ramin — Mon, 31 Dec 2012 09:09:47 +0000

Really nice work sir

By: w3easystep » Blog Archive » 180 Awesome jQuery Slider and Effects Roundup

Mon, 17 Dec 2012 04:46:20 +0000

[...] 77. Color Changing Text and Backgrounds Effects This effect can be used to change the colors and background of your object in a flashing style. [...]

By: Nico

Nico — Sun, 09 Dec 2012 22:08:02 +0000

It’s equally cpu consuming (check the task manager). I don’t know if it’s because the animate function isn’t hardware accelerated or what. I read css animations are better but not all browsers can handle them, I will have to read more about it ;)

By: Nico

Nico — Sun, 09 Dec 2012 22:04:18 +0000

yeah, that’s another way, in my function I needed to change 2 object’s color, so I made that and called that function every 5 secs with setInterval like this:

$(document).ready(function() {
setInterval(‘changeColors()’,5000);
});

By: bryan

bryan — Sun, 09 Dec 2012 21:46:36 +0000

i figured it out myself –

a better way to loop is using the .animate jquery callback: (see after 1000 below i inserted a comma then “spectrum” which is the name of the function calling animate itself creating a loop)

$(‘#element’).animate( { backgroundColor: hue }, 1000, spectrum);