jquery - 如何在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);
    });
});​

Simple JsFiddle Example

编辑

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

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

参见new JsFiddle (使用 jQuery UI)。我相信这会给您带来您想要的效果。