Animate颜色变化转换

每当使用CSS或其他任何东西时，我们会改变颜色，如背景，颜色，边框颜色等。有没有一种方法可以使正常状态和悬停状态颜色之间的转换动画化？Animate颜色变化转换

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

有没有办法做到这一点？

来源

2010-11-04 Moon

你可以使用jQuery吗？ – 2010-11-04 18:16:59

我无法编码jQ ...但我已经使用它很多，你知道从演示和示例获取代码并将其更改为我的需要和所有..我知道基本知识 – Moon 2010-11-05 06:55:52

有没有办法使用CSS来做到这一点。它需要JavaScript。 – meagar 2010-11-05 18:52:46

听起来像是jQuery的工作 - 具体而言，对于动画（）方法：

来源

2010-11-04 18:18:33 Dave

使用jQuery，因为“色”是不是一个数字的CSS属性不能直接动画的颜色。

但是你可以这样做：让元素A的样式反映非悬停状态，并让元素B的样式反映悬停状态，除非透明度设置为0。元素A.然后使用jQuery fadeIn（）和fadeOut（）方法更改悬停时元素B的不透明度。

来源

2010-11-04 19:22:56

有可能吗？是

怎么可能？ 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

来源

2010-11-04 22:56:25 zzzzBov

这可以用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（）;

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

来源

2010-11-05 18:32:34 Daryl

Animate颜色变化转换

回答

相关问题