jQuery背景动画

Question

在jQuery中是否可以动画化 background-color，因为它目前无法正常工作。

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

- Yanh Huan

---

实际上，我如何使一个 div 的背景平滑地改变？ - Yanh Huan

如果您想对问题进行补充，可以编辑它而不是在评论中添加。只需单击问题左下角附近的edit链接即可。 - Matt Ball

值得注意的是，background 是一种简写符号，用于定义 background-color、background-image、background-position、background-repeat 和 background-attachment。你试图动画化的属性（在你的问题中是固定的）是 background-color（或者在 JS 中不带引号的情况下是 backgroundColor）。 - David Thomas

Answer 1

从文档中可以看出，

jQuery UI项目通过允许一些非数字样式（如颜色）进行动画化，扩展了.animate()方法。该项目还包括通过CSS类而不是单个属性指定动画的机制。

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

jQuery的颜色动画插件也可以实现此功能。

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

- Thai

Answer 2

您需要使用插件才能在jQuery中进行颜色动画： http://plugins.jquery.com/project/color

- Jerod Venema

---

根据API文档，非数字属性无法使用基本的jQuery功能进行动画处理。（例如，width、height或left可以进行动画处理，但background-color不能。） - Matt Ball

Answer 3

试试这个：

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

我在使用animate时遇到了不同的问题，但是发现使用它内置的回调函数再加上jQuery的css似乎适用于大多数情况。在IE9、FF4和Chrome中进行了测试，使用的是jQuery 1.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();

- matadur

Answer 4

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

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

- Taha Jahangir

Answer 5

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

SyntaxError: 意外的标记 -

通过将CSS属性background-color封装在单引号中，我成功地让它工作：

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

- Jeromy French

Answer 6

您可以使用CSS3过渡来实现相同的效果。您的动画可以通过以下方式实现

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

}

这种解决方案唯一的问题就是 IE<10 的支持。

- amitgur