Search jQuery

jQuery Forum

Using jQuery Plugins

mikeebee8

Using jQuery Color to cycle through some specified colours

in Using jQuery Plugins • 11 years ago

Hi all,

I followed a tutorial which explained how to use the jQuery color plugin to cycle through random colours.

spectrum();
function spectrum(){
var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
$('#container').animate( { backgroundColor: hue }, 1000);
spectrum();
}

This works great but I'd like to limit it to X number of specific colours. Is this an easy change? I tried altering it myself but got nowhere fast.

Cheers

Replies(4)

jakecigar

Re: Using jQuery Color to cycle through some specified colours

11 years ago

Your code is not a "plugin". It’s just a one field only function. This code is a plugin

$.fn.spectrum=function(arrayOfColors){
return this.each(function(){
var self=$(this);
(function spectrum(){
var hue=arrayOfColors.shift()
arrayOfColors.push(hue)
self.animate({ backgroundColor: hue }, 1000,spectrum)
})();
})
}

And this is how you might use it.

function randomHues(n){
var res=[]
for(var i=0;i<n;i++)
res.push('rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')')
return res
}
var hues=randomHues(10) // or hardcode your own
$(function(){
$('#container').spectrum(hues);
})

I tested it with off the shelf jquery-ui-1.8.16, and not "the color plugin", but it should be the same.
JΛ̊KE

mikeebee8