jQuery与js实现颜色渐变的方法

如果要使用jQuery与js实现颜色渐变，一般常用的方法有两种：

方法一：使用jQuery的animate()方法实现颜色渐变

使用animate()方法来改变元素的css属性值实现颜色渐变，具体步骤如下:

1.确定需要渐变的元素及其初始和目标颜色值。

var $target = $('#target');
var startColor = '#FF0000';
var endColor = '#00FF00';

2.在一个动画函数中设置渐变效果。我们可以使用一个定时器来不断改变元素的颜色值。

function colorFade($target, startColor, endColor) {
  $target.css('background-color', startColor); // 初始颜色值

  var steps = 100; // 渐变的总步数
  var step = 0; // 当前步数
  var colorStepR = (parseInt(endColor.slice(1, 3), 16) - parseInt(startColor.slice(1, 3), 16)) / steps; // 计算每一步红色颜色值的变化量
  var colorStepG = (parseInt(endColor.slice(3, 5), 16) - parseInt(startColor.slice(3, 5), 16)) / steps; // 计算每一步绿色颜色值的变化量
  var colorStepB = (parseInt(endColor.slice(5, 7), 16) - parseInt(startColor.slice(5, 7), 16)) / steps; // 计算每一步蓝色颜色值的变化量

  var timer = setInterval(function() {
    step++;
    var newColor = '#';

    var r = parseInt(parseInt(startColor.slice(1, 3), 16) + step * colorStepR).toString(16);
    r = r.length == 1 ? '0' + r : r;
    newColor += r;

    var g = parseInt(parseInt(startColor.slice(3, 5), 16) + step * colorStepG).toString(16);
    g = g.length == 1 ? '0' + g : g;
    newColor += g;

    var b = parseInt(parseInt(startColor.slice(5, 7), 16) + step * colorStepB).toString(16);
    b = b.length == 1 ? '0' + b : b;
    newColor += b;

    $target.css('background-color', newColor);

    if (step >= steps) { // 渐变结束
      clearInterval(timer);
    }
  }, 10);
}

colorFade($target, startColor, endColor);

方法二：使用JavaScript的setInterval()方法实现颜色渐变

同样使用定时器，在两种方法中都可以实现渐变效果。这里我们也可以使用setInterval()方法来实现。

1.定义需要渐变的元素及其初始和目标颜色值。

var target = document.getElementById('target');
var startColor = '#FF0000';
var endColor = '#00FF00';

2.在一个动画函数中设置渐变效果。同样计算颜色值的变化量，并在每一步中改变元素的颜色。

function colorFade(target, startColor, endColor) {
  target.style.backgroundColor = startColor;

  var steps = 100; // 总调色板数
  var step = 0;
  var colorStepR = (parseInt(endColor.slice(1, 3), 16) - parseInt(startColor.slice(1, 3), 16)) / steps; // 红色的每一步的变化量
  var colorStepG = (parseInt(endColor.slice(3, 5), 16) - parseInt(startColor.slice(3, 5), 16)) / steps; // 绿色的每一步的变化量
  var colorStepB = (parseInt(endColor.slice(5, 7), 16) - parseInt(startColor.slice(5, 7), 16)) / steps; // 蓝色的每一步的变化量

  var timer = setInterval(function() {
    step++;
    var newColor = '#';

    var r = parseInt(parseInt(startColor.slice(1, 3), 16) + step * colorStepR).toString(16);
    r = r.length == 1 ? '0' + r : r;
    newColor += r;

    var g = parseInt(parseInt(startColor.slice(3, 5), 16) + step * colorStepG).toString(16);
    g = g.length == 1 ? '0' + g : g;
    newColor += g;

    var b = parseInt(parseInt(startColor.slice(5, 7), 16) + step * colorStepB).toString(16);
    b = b.length == 1 ? '0' + b : b;
    newColor += b;

    target.style.backgroundColor = newColor;

    if (step >= steps) { // 渐变结束
      clearInterval(timer);
    }
  }, 10);
}

colorFade(target, startColor, endColor);

这两种渐变方法基本相同，可以实现颜色的平滑过渡。如果要让渐变效果更加平滑，可以适当增加调色板数。