Question

是否可以在jQuery中为background-color设置动画，因为它无效。

$('#something').animate({
    background :"red"
}, 1000);

Answer 1

来自docs，

jQuery UI项目通过允许对颜色等非数字样式进行动画处理来扩展.animate()方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。

因此，如果您使用jQuery UI，则可以为背景颜色设置动画。只需确保使用backgroundColor而不是background。

jQuery的color animations plugin也可以。

直播示例：http://jsfiddle.net/thai/NXejr/2/

Answer 2

你需要一个插件来使用jQuery做彩色动画：

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

Answer 3

试试这个：

$('#something').animate({ backgroundColor: "#FF0000" }, 1000, null, function () {
      $('#something').css("backgroundColor", "#FF0000");
  });

我在动画方面取得了不同的成功，但发现使用内置的回调加上jQuery的css似乎适用于大多数情况。使用jQuery 1.5在IE9，FF4，Chrome中测试。

要获得更完整的解决方案，请添加以下插件：

$(document).ready(function () {

    $.fn.animateHighlight = function (highlightColor, duration) {
        var highlightBg = highlightColor || "#FF0000";
        var animateMs = duration || 1000;
        var originalBg = this.css("background-color");

        if (!originalBg || originalBg == highlightBg)
            originalBg = "#FFFFFF"; // default to white

        jQuery(this)
            .css("backgroundColor", highlightBg)
            .animate({ backgroundColor: originalBg }, animateMs, null, function () {
                jQuery(this).css("backgroundColor", originalBg); 
            });
    };
});

并称之为：

$('#something').animateHighlight();

Answer 4

这是使用纯jQuery动画RGB颜色的简单代码（而不是使用jQuery.Color插件）

var start = [255, 0, 0], end=[255,255,255];
$('#element').animate({'aaa': 1}, {step: function(now){
    $(this).css('background-color', 'rgb('+
        parseInt(start[0] + (end[0]-start[0]) * now) + ',' +
        parseInt(start[1] + (end[1]-start[1]) * now) + ',' +
        parseInt(start[2] + (end[2]-start[2]) * now) + ')'
    )
}, complete: function(){$(this).css('aaa', 0)}})

Answer 5

您可以使用CSS3过渡来获得相同的效果。

可以实现你的动画效果

#something {
  -webkit-transition: background-color 1s linear;
   transition: background-color 1s linear;
   background: red;

}

此解决方案的唯一问题是＆lt; 10 support

Answer 6

使用类似的语法（...{background-color :"red"}...），我收到错误

SyntaxError：意外的令牌 -

我能够通过将CSS属性background-color封装在单引号中来实现它：

$('#something').animate({
    'background-color' :"red"
}, 1000);

Jquery背景动画

6 个答案: