jQuery动画背景颜色

我喜欢使用delay()来完成这个任务，以下是一个例子：

jQuery(element).animate({ backgroundColor: "#FCFCD8" },1).delay(1000).animate({ backgroundColor: "#EFEAEA" }, 1500);

这可以通过函数调用，"element" 代表元素的类名/名称等。该元素将立即出现带有 #FCFCD8 背景，保持一秒钟，然后淡入 #EFEAEA。

试试这个：

(function($) {  

            var i = 0;  

            var someBackground = $(".someBackground");  
            var someColors = [ "yellow", "red", "blue", "pink" ];  


            someBackground.css('backgroundColor', someColors[0]);  

            window.setInterval(function() {  
                i = i == someColors.length ? 0 : i;  
                someBackground.animate({backgroundColor: someColors[i]}, 3000);  
                i++;  
            }, 30);  

})(jQuery);  

你可以在这里预览示例：http://jquerydemo.com/demo/jquery-animate-background-color.aspx

我发现这个页面有相同的问题，但是以下是我的问题：

1. 我无法在当前设置中包含额外的jQuery插件文件。
2. 我不愿意粘贴我没有时间阅读和验证的大块代码。
3. 我没有访问CSS。
4. 我几乎没有时间进行实现（它只是对管理页面的可视化改进）。

考虑到以上情况，几乎每个答案都被排除了。由于我的颜色渐变非常简单，我使用了以下快速hack：

element
  .css('color','#FF0000')
;
$('<div />')
  .css('width',0)
  .animate(
    {'width':100},
    {
      duration: 3000,
      step:function(now){
        var v = (255 - 255/100 * now).toString(16);
        v = (v.length < 2 ? '0' : '') + v.substr(0,2);
        element.css('color','#'+v+'0000');
      }
    }
  )
;

上述代码创建了一个临时的 div 元素，该元素从未放置在文档流中。然后，使用 jQuery 内置的动画效果来动画化该元素的数字属性 - 在本例中为 width，可以表示百分比（0 到 100）。然后，使用 step 函数，将此数字动画转换为文本颜色，并进行简单的十六进制计算。
使用 setInterval 也可以实现相同的效果，但是使用此方法可以受益于 jQuery 的动画方法 - 如 .stop() - 并且可以使用缓动和持续时间。
显然，它仅适用于简单的颜色淡入淡出，对于更复杂的颜色转换，您需要使用上面提到的答案之一 - 或编写自己的颜色淡入淡出数学公式 :)

使用动画效果更改背景颜色，无需使用jQueryUI：

selector.css({
    backgroundColor: "#555",
    transition: "background-color 1.8s"
});

ColorBlend插件正好可以满足您的需求

http://plugins.jquery.com/project/colorBlend

这是我的高亮代码

$("#container").colorBlend([{    colorList:["white",  "yellow"], 
    param:"background-color",
    cycles: 1,
    duration: 500
}]);

如果您想使用核心jQuery功能来为背景添加动画效果，请尝试以下方法：

jQuery(".usercontent").mouseover(function() {
      jQuery(".usercontent").animate({backgroundColor:'red'}, 'fast', 'linear', function() {
            jQuery(this).animate({
                backgroundColor: 'white'
            }, 'normal', 'linear', function() {
                jQuery(this).css({'background':'none', backgroundColor : ''});
            });
        });

试试这个：

jQuery(".usercontent").hover(function() {
    jQuery(this).animate({backgroundColor:"pink"}, "slow");
},function(){
    jQuery(this).animate({backgroundColor:"white"}, "slow");
});

带有效果的修订方式：

jQuery(".usercontent").hover(function() {

    jQuery(this).fadeout("slow",function(){
        jQuery(this).animate({"color","yellow"}, "slow");
    });
});

试着使用它

-moz-transition: background .2s linear;
-webkit-transition: background .2s linear;
-o-transition: background .2s linear;
transition: background .2s linear;