jQuery operates background color gradient animation effect

This time I will bring you the jQuery operation background color gradient animation effect. What are the precautions for jQuery operation background color gradient animation effect. The following is a practical case, let's take a look.

nbsp;html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">


<meta>
<title>背景颜色渐变</title>
<script></script>


<input>
<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) { document.getElementById("asd").style.backgroundColor = color; }, 1, 10);
  }
  //所有代码的执行时间只有24毫秒左右。
  function fadeColor(from, to, callback, duration, totalFrames) {
    //用一个函数来包裹setTimeout，根据帧数来确定延时
    function doTimeout(color, frame) {
      setTimeout(function () {
        try {
          callback(color);
        } catch (e) { JSLog.write(e); }
      }, (duration * 1000 / totalFrames) * frame);
      //总持续秒数/每秒帧数*当前帧数=延时(秒)，再乘以1000作为延时(毫秒)
    }
    // 整个渐变过程的持续时间，默认为1秒
    var duration = duration || 1;
    // 总帧数，默认为持续秒数*15帧，也即每秒15帧
    var totalFrames = totalFrames || duration * 15; var r, g, b; var frame = 1;
    //在第0帧设置起始颜色
    doTimeout(&#39;rgb(&#39; + from.r + &#39;,&#39; + from.g + &#39;,&#39; + from.b + &#39;)&#39;, 0);
    //计算每次变化所需要改变的rgb值
    while (frame < totalFrames + 1) {
      r = Math.ceil(from.r * ((totalFrames - frame) / totalFrames) + to.r * (frame / totalFrames));
      g = Math.ceil(from.g * ((totalFrames - frame) / totalFrames) + to.g * (frame / totalFrames));
      b = Math.ceil(from.b * ((totalFrames - frame) / totalFrames) + to.b * (frame / totalFrames));
      // 调用本frame的doTimeout
      doTimeout(&#39;rgb(&#39; + r + &#39;,&#39; + g + &#39;,&#39; + b + &#39;)&#39;, frame); frame++;
    }
  }
</script>
<p>
  脚本之家欢迎各位光临--http://www.jb51.net
</p>

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the use of jquery plug-in extension

jQuery implements single-line announcement carousel

jQuery operates anchor point dynamic displacement

The above is the detailed content of jQuery operates background color gradient animation effect. For more information, please follow other related articles on the PHP Chinese website!