Jquery背景动画

是否可以在jQuery中设置背景色的动画，因为它不起作用

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

---

您需要一个插件来使用jQuery制作彩色动画：

从

该项目扩展了

.animate（）

方法，允许对一些非数字样式（如颜色）设置动画。该项目还包括通过CSS类而不是单个属性指定动画的机制

因此，如果您使用jqueryui，您可以设置背景颜色的动画。只需确保使用

backgroundColor

而不是

background

for jQuery也可以做到这一点

现场示例：

尝试以下方法：

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

我在使用animate时取得了不同的成功，但发现使用其内置回调加上jQuery的css似乎适用于大多数情况。在IE9、FF4、Chrome中测试，使用jQuery1.5

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

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

---

您可以使用CSS3转换实现相同的效果。你的动画可以通过

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

}

这个解决方案唯一的问题是IE使用类似的语法（

…{background color:“red”}…

），我得到了错误

SyntaxError:意外标记-

通过将CSS属性

background color

封装在单引号中，我可以使其正常工作：

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

---

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

---

实际上，我怎样才能顺利地改变一个div的背景呢？如果你想对你的问题做一个补充，你可以编辑它而不是评论它。只需单击问题左下角附近的链接。值得注意的是，

背景

是一种用于定义

背景颜色

、

背景图像

、

背景位置

、

背景重复

和

背景附件

的简写符号。您试图设置动画的属性（在您的问题中已修复）是

背景色

（或者，在没有引号的JS中，

背景色

）。+1。这根据：“不能使用基本的jQuery功能设置非数字属性的动画。（例如，

宽度

、

高度

、或

左侧

可以设置动画，但

背景色

不能设置。）

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)}})