Kleur overgang

Hoi,

Ik zoek een manier om achtergrond kleur te veranderen met een overgang effect. (Voorbeeldje: https://yourkarma.com/coverage overgang begint direct)

Nu heb ik met jQuery UI een manier gevonden om dit te doen maar ik vind het onzin om heel jQuery UI in te laden voor enkel een klein effect dat maar op één pagina gebruikt gaat worden.

Hopelijk kunnen jullie mij helpen met een Javascript / jQuery variant.

Wat je kan doen is

1. je oude en nieuwe kleur definiëren als losse rgb waardes. Bijvoorbeeld: rood en groen zijn rgb(255,0,0) en rgb(0,255,0). Dan krijg je de waardes:
roodOud = 255
roodNieuw = 0
groenOud = 0
groenNieuw = 255
etc

2. Een functie maken die je oproept als de div van kleur moet veranderen. Deze moet roodOud, groenOud en blauwOud +1 of -1 doen zodat het richting gaat van roodNieuw, groenNieuw en blauwNieuw.

3. In die functie zet je code:

dedivdiejewiltveranderen.style.backgroundColor = rgb(+roodOud+,+etc, etc.

4. Check of je oude kleuren gelijk zijn aan je nieuwe kleuren, zoja, zet een timeout op de functie zelf. Zonee, dan stopt de functie.

Alsnog raad ik je aan om jQuery te gebruiken ;P

Volgens mij krijg je een regenboog van kleuren bij jouw idee omdat het verschil in getallen niet gelijk is.

jQuery gebruik ik ook voor de rest van de website maar jQueryUI (extentie van jQuery) wil ik liever niet gebruiken omdat het best groot is voor maar een kleine functie.

Oh, in dat geval zou ik alleen de plugin downloaden voor kleur animatie. http://www.bitstorm.org/jquery/color-animation/

Thanks, dat is inderdaad wat ik nodig heb.