Html 设置颜色变化过渡的动画

无论何时使用css或任何东西，我们都会更改颜色，如背景、颜色、边框颜色等。是否有一种方法可以设置正常和悬停状态颜色之间的过渡动画

我想说的是颜色，比如说从白色到黑色的瞬间变化。我想要过渡阶段，就像所有介于白色和黑色之间的灰度。对于颜色，如果一种颜色淡入另一种颜色，则可以通过淡入效果来实现。中间的颜色被遮住了

---

有什么方法可以实现这一点吗？

听起来像是jQuery的工作，特别是对于animate（）方法：

---

听起来像是jQuery的工作——特别是对于animate（）方法：

---

无法使用jQuery直接设置颜色动画，因为“颜色”不是数字CSS属性

---

但是您可以这样做：让元素A的样式反映非悬停状态，让元素B的样式反映悬停状态，除非不透明度设置为0。然后绝对地将元素B直接放置在元素A上。然后使用jQuery fadeIn（）和fadeOut（）方法更改悬停时元素B的不透明度。

不能使用jQuery直接设置颜色动画，因为“颜色”不是数字CSS属性

但是您可以这样做：让元素A的样式反映非悬停状态，让元素B的样式反映悬停状态，除非不透明度设置为0。然后绝对地将元素B直接放置在元素A上。然后使用jQuery fadeIn（）和fadeOut（）方法更改悬停时元素B的不透明度。

可能吗？对

怎么可能呢？javascript

X3Maverick有一个很好的答案（很抱歉，没有投票了），但是您也可以尝试制作一个计时器来相应地调整颜色

var interval = 500,
  iteration = 0,
  maxIterations = 10;

setTimeout(doUpdate, interval);

function doUpdate()
{
  //color logic here 'rgb( R, G, B)' or #GHIJKL
  switch (interval)
  {
    case 0:
    ...
  }
  if (iteration < maxIterations) setTimeout(doUpdate, interval);
}

var间隔=500，
迭代=0，
最大迭代次数=10；
设置超时（双更新，间隔）；
函数doUpdate（）
{
//这里的颜色逻辑是“rgb（R，G，B）”或“GHIJKL”
开关（间隔）
{
案例0：
...
}
if（迭代<最大迭代）设置超时（双更新，间隔）；
}

这将允许您精确地指定所需的颜色和顺序。请只使用你的力量为好或为可怕。闪烁的颜色和闪烁的文字会导致癫痫发作，不受欢迎

jQuery现在有了一个官方的彩色动画插件：
有可能吗？对

怎么可能呢？javascript

X3Maverick有一个很好的答案（很抱歉，没有投票了），但是您也可以尝试制作一个计时器来相应地调整颜色

var interval = 500,
  iteration = 0,
  maxIterations = 10;

setTimeout(doUpdate, interval);

function doUpdate()
{
  //color logic here 'rgb( R, G, B)' or #GHIJKL
  switch (interval)
  {
    case 0:
    ...
  }
  if (iteration < maxIterations) setTimeout(doUpdate, interval);
}

var间隔=500，
迭代=0，
最大迭代次数=10；
设置超时（双更新，间隔）；
函数doUpdate（）
{
//这里的颜色逻辑是“rgb（R，G，B）”或“GHIJKL”
开关（间隔）
{
案例0：
...
}
if（迭代<最大迭代）设置超时（双更新，间隔）；
}

这将允许您精确地指定所需的颜色和顺序。请只使用你的力量为好或为可怕。闪烁的颜色和闪烁的文字会导致癫痫发作，不受欢迎

jQuery现在有了一个官方的彩色动画插件：

---

这可以通过CSS3实现，尽管它目前还没有完全跨浏览器

或者，您可以使用jQuery.animate（）

---

这可以通过CSS3实现，尽管它还没有完全跨浏览器

或者，您可以使用jQuery.animate（）

---

我不能给jQ编码。。。但是我经常使用它，你知道的，从演示和示例中获取代码，并根据我的需要进行修改。。我知道最基本的是CSS无法实现这一点。它需要JavaScript。我无法编写jQ。。。但是我经常使用它，你知道的，从演示和示例中获取代码，并根据我的需要进行修改。。我知道最基本的是CSS无法实现这一点。它需要JavaScript。

        $("#yourdiv").css({
            backgroundColor: #000000 // Original Background color
        }).hover(function() {
            $(this).stop().animate({
                backgroundColor: #ff0000 // Hover State Background color
            }, 350); // animation time
        }, function() {
            $(this).stop().animate({
                backgroundColor: #000000 // Hover out ( back to original )
            }, 350); // animation time
        });