This article describes the background color gradient animation effect implemented by jQuery. Share it for your reference, as follows:
The complete example code is as follows:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http:///TR/html4/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Background color gradient</title>
<script type="text/javascript" src="jquery-1.7."></script>
</head>
<body>
<input type="button" value="button" onclick="tggg()" />
<script>
function tggg() {
//$("#asd").css({ "background-color": "red" }).show().fadeOut(500);
fadeColor(
{ r: 0, g: 255, b: 0 }, //star color
{r: 255, g: 255, b: 255 }, //end color
function (color) { ("asd"). = color; }, 1, 10);
}
//The execution time of all code is only about 24 milliseconds. function fadeColor(from, to, callback, duration, totalFrames) {
//Use a function to wrap setTimeout and determine the delay based on the number of frames function doTimeout(color, frame) {
setTimeout(function () {
try {
callback(color);
} catch (e) { (e); }
}, (duration * 1000 / totalFrames) * frame);
//Total number of lasting seconds/frames per second*current number of frames = delay (seconds), multiply by 1000 as delay (ms) }
// The duration of the entire gradient process is 1 second by default var duration = duration || 1;
// The total number of frames, default is to last seconds * 15 frames, that is, 15 frames per second var totalFrames = totalFrames || duration * 15; var r, g, b; var frame = 1;
//Set the starting color in frame 0 doTimeout('rgb(' + + ',' + + ',' + + ')', 0);
// Calculate the rgb value that needs to be changed for each change while (frame < totalFrames + 1) {
r = ( * ((totalFrames - frame) / totalFrames) + * (frame / totalFrames));
g = ( * ((totalFrames - frame) / totalFrames) + * (frame / totalFrames));
b = ( * ((totalFrames - frame) / totalFrames) + * (frame / totalFrames));
// Call the doTimeout of this frame doTimeout('rgb(' + r + ',' + g + ',' + b + ')', frame); frame++;
}
}
</script>
<div style="width: 600px; height: 200px; border: 1px solid red;" >
I welcome you all--https://
</div>
</body>
</html>
PS: Here are a few related color and special effects tools for your reference:
Online special effect text/color text generation tool:
http://tools./aideddesign/colortext
Online Rainbow Text/Color Gradient Text Generation Tool:
http://tools./aideddesign/txt_caihongzi
Online luminous word generation tool:
http://tools./aideddesign/txt_faguangzi
Vertical conversion tool for antique book typesetting text:
http://tools./transcoding/shupai
For more information about jQuery, please visit the special topic of this site:Summary of commonly used plug-ins and usages of jQuery》、《Summary of Ajax usage in jquery》、《Summary of jQuery table operation skills》、《Summary of jQuery extension skills》、《Summary of common classic effects of jQuery"and"Summary of jquery selector usage》
I hope this article will be helpful to everyone's jQuery programming.