Jquery Color Changing Text Script

Use this simple jquery copy paste script to change text colors in your webpage on mouse hover.

Features

Script is based on the Jquery Event change() method.
Showcase multiple colors smoothly on a text when mouse hover is made.
Use jquery to hover a text with animation.
Copy paste code for color changing text.
Color animation that works on almost all modern browsers.

Preview

Color Changing Text Effect on Mouse Over

Every one can find fault, few can do better

Fire is a good servant but a bad master

Better the devil you know than the devil you don't know

Curses are like chickens, they come home to roost

Love covers a multitude of sins

Mirrors do everything we do, but they cannot think for themselves

©h

Downloads

<html><head><title>Color Changing Text Effect on Mouse Over</title><script type='text/javascript' src='./jquery.js'></script>
<script type='text/javascript'>
var degre = 30;
// Degree of colors
var act = 0; // Flag during the action
var hueelt = 0; // Hue
var firselt = 128; // Saturation
var valelt = 255; // Value
var clrColor; // A color before the change
var timer; // Timer
function
mover(idd) {$('#iid').val(idd)timer = setInterval("colorsChange()",100);
}
function mout(idd) {$('#'+idd).css('color','#000');clearInterval(timer);
}
// This function changes a color actually.
function colorsChange()
{var idd=$('#iid').val();
var clr=makesColors();$('#'+idd).css('color',clr);
}
// This function makes rainbow colors.
function makesColors()
{// HSVtoRGBif (firselt == 0){redelt = valelt; greelt = valelt; bluelt = valelt;}else{temp1 = valelt;temp2 = (255 - firselt) * valelt / 255;temp3 = hueelt % 60;temp3 = (temp1 - temp2) * temp3 / 60;if (hueelt < 60){redelt = temp1; bluelt = temp2; greelt = temp2 + temp3;}else if (hueelt < 120){greelt = temp1; bluelt = temp2; redelt = temp1 - temp3;}else if (hueelt < 180){greelt = temp1; redelt = temp2; bluelt = temp2 + temp3;}else if (hueelt < 240){bluelt = temp1; redelt = temp2; greelt = temp1 - temp3;}else if (hueelt < 300){bluelt = temp1; greelt = temp2; redelt = temp2 + temp3;}else if (hueelt < 360){redelt = temp1; greelt = temp2; bluelt = temp1 - temp3;}else{redelt = 0; greelt = 0; bluelt = 0;}}redelt = Math.floor(redelt).toString(16);greelt = Math.floor(greelt).toString(16);bluelt = Math.floor(bluelt).toString(16);if (redelt.length == 1) redelt = "0" + redelt;if (greelt.length == 1) greelt = "0" + greelt;if (bluelt.length == 1) bluelt = "0" + bluelt;hueelt = hueelt + degre;if (hueelt >= 360)hueelt = 0;return '#' + redelt + greelt + bluelt;
}
</script>
<style type='text/css'>
.textover{cursor: pointer;width: 450px;text-align: justify;
}
ul.stle{
list-style-type:disc;
}
</style></head><body>
<div style=' padding-top: 50px; font-weight: bold; color: #4e4e4e;' align=center><h1>Color Changing Text Effect on Mouse Over</h1></div><div align='center' style='padding-left: 10px; padding-top: 25px;'><ul class='stle'><li id='p1' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Every one can find fault, few can do better</li><br><li id='p2' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Fire is a good servant but a bad master</li><br><li id='p3' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Better the devil you know than the devil you don't know</li><br><li id='p4' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Curses are like chickens, they come home to roost</li><br><li id='p5' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Love covers a multitude of sins</li><br><li id='p6' onmouseover='mover(this.id)' onmouseout='mout(this.id)' class='textover'> Mirrors do everything we do, but they cannot think for themselves</li></ul>
</div><table><tr><td><div style=" padding-left: 650px;font-size: 10px;color: #dadada;" id="dumdiv">
<a href="//www.hscripts.com" id="dum" style="padding-right:0px; text-decoration:none;color: green;">©h</a></div></td></tr>
</table>
<input type='hidden' id='iid' value=''></body>
</html>

Release Date - 02-04-2013
Get free version without ©copyright link for just $10/-
For customization of this script or any script development, mail to support@hscripts.com

Usage

Copy paste the Jquery color changing script in your webpage.
Download jquery.js file and place the file in your folder.
Now run the file in your browser to view the functionality of the script.
You can change the sentences for which you want to animate the changing effects.
<p align="center">Every one can find fault, few can do better</p> // Change the sentences here.

License

This Jquery code is given under GPL License
i.e. Free use for those who use the codes as it is.
Free, if your modification does not remove our copyright information and links.
Detailed License information can be found here.
You can purchase the script if your requirements does not meet our GPL License terms.