动画颜色变化过渡答案

【问题标题】：Animate Colour Change transitions动画颜色变化过渡
【发布时间】：2011-05-05 05:32:11
【问题描述】：

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

我想说的是颜色，让我们说立即从白色变为黑色。我想要过渡阶段，就像白色和黑色之间的所有灰度一样。对于颜色，如果一种颜色淡入另一种颜色，则可以通过淡化效果来实现。中间的颜色被掩盖了。

有没有办法做到这一点？

【问题讨论】：

我不会编写 jQ 代码...但我经常使用它，您知道从演示和示例中获取代码并根据我的需要进行更改...我知道基础知识
没有办法用 CSS 做到这一点。它需要 JavaScript。

标签： html css animation colors hover

【解决方案1】：

这可以通过 CSS3 完成，尽管它还没有完全跨浏览器。 http://www.the-art-of-web.com/css/css-animation/

a { 
    -webkit-transition: all 1s ease-in-out; // control the animation time via '1s'
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
    color:#ff0000;
}

a:hover { color:#00ff00 }

或者你可以使用 jQuery .animate(); http://api.jquery.com/animate/

        $("#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
        });

【讨论】：

【解决方案2】：

听起来像是 jQuery 的工作——特别是 animate() 方法：

http://api.jquery.com/animate/

【讨论】：

【解决方案3】：

有可能吗？是的

这怎么可能？ 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);
}

这将允许您准确指定所需的颜色和顺序。请仅将您的力量用于好的或令人敬畏的。闪烁的颜色和闪烁的文字会导致癫痫发作并且不受欢迎。

jQuery 现在有一个官方的彩色动画插件：
http://docs.jquery.com/Release:jQuery_1.2/Effects#Color_Animations

【讨论】：

【解决方案4】：

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

但是你可以这样做：让元素 A 的样式反映非悬停状态，让元素 B 的样式反映悬停状态，但不透明度设置为 0。然后将元素 B 绝对定位在元素上A. 然后使用jQuery的fadeIn()和fadeOut()方法来改变元素B在悬停时的不透明度。

【讨论】：