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

Question

我想为背景设置动画,但它不会随着.animate而改变!

<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");
    });
});?

Answer 1

更简单的淡入/淡出会满足您的需求吗？

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

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

简单的JsFiddle示例

编辑

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

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

查看新的JsFiddle(使用jQuery UI).我相信这会给你带来你想要的效果.