如何在jquery中缓慢更改背景属性？

我想设置背景动画，但它不会随时间而改变。设置动画

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

$(document).ready(function() {
    $(".menu").hover(
    function() {
        $(this).stop().animate({
            "background": "-moz-radial-gradient(top, #fff, #cfcfcf)"
        }, "slow");
    }, function() {
        $(this).stop().animate({
            "background": "-moz-radial-gradient(top, #fff, #333)"
        }, "slow");
    });
});​

$（文档）.ready（函数（）{
$（“.menu”）。悬停(
函数（）{
$（this）.stop（）.animate({
“背景”：“-moz径向梯度（顶部，#fff，#cfcfcf）”
}“慢”）；
}，函数（）{
$（this）.stop（）.animate({
“背景”：“-moz径向梯度（顶部，#fff，#333）”
}“慢”）；
});
});​

使用插件可以使用动画背景

动画功能仅适用于数字单位，如宽度、高度、填充、边距、字体大小……而不适用于颜色

这样做的方式几乎是无穷无尽的。以下是要查看的列表：

只是Google jQuery Backgorund图像动画，但它们都有一个共同点，要么子元素上下滑动，要么背景图像位置被动画化

---

我建议您远离jQuery颜色插件，因为当您寻找类似的东西时，这听起来是一个好主意，但我认为社区会同意我的观点，除非您使用完整的UI库，否则它是非常有缺陷的。

更简单的淡入/淡出是否能满足您的需要

#div1{
    height:100px;
    width:100px;
    background-color:Black;
}​

$("#div1").click(function() {
    $(this).fadeOut(1000, function() {
        $(this).css("background-color", "#FF0000").fadeIn(1000);
    });
});​

编辑

#div1{
    height:200px;
    width:200px;
    background-color:Black;
    float:left;
}​

$('#div1').click(function (){
    $(this).animate({backgroundColor: '#FF0000'}, 1000);
});​

---

请参阅（使用jqueryui）。我相信这会给你带来你想要的效果。

你可以将一个div置于另一个div之上，然后将顶部的一个淡入淡出。这将为您提供平滑的颜色过渡

更新的示例更改悬停时的梯度

---

示例：

仅支持“backgroundColor”、“borderBottomColor”、“borderLeftColor”、“borderRightColor”、“borderTopColor”、“outlineColor”我无法使用bgposition，因为我使用css3动画，插件仅支持“backgroundColor”、“borderBottomColor”、“borderLeftColor”、“borderRightColor”、“borderTopColor”，“outlineColor”然后尝试使用CSS转换而不是JavaScript解决您的问题。我认为那样你会得到更好的结果。我为此添加了一个CSS3链接，如果我可以在不隐藏它的情况下对其进行更改。。那太好了这些答案能解决你的问题吗？