How to change slowly background attributes in jquery?

问题

I want to animate the background, but it won't change with .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");
    });
});

回答1:

Would a simpler fade in / fade out meet your needs?

#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

EDIT

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

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

See new JsFiddle (uses jQuery UI). I believe that this will give you the effect you're looking for.

回答2:

Use this plugin to be able to use animating background

回答3:

The animate function only works with numberic units such as width, height, padding, margin, font-size...not with colors.

there are almost endless ways of doing this. Here is a list to check out:

http://snook.ca/archives/javascript/jquery-bg-image-animations

http://www.protofunc.com/scripts/jquery/backgroundPosition

http://www.webresourcesdepot.com/background-image-animation-with-jquery-jani

Have a look at this CSS3 solution for background colour animation

Just Google jQuery Backgorund image animation, but what they all have in common is that either a child element slides up and down or the background image position is being animated.

I advise you to stay away from the jQuery Color plugin as it sounds like a good idea when you look for things like this, but i think the community will agree with me that it is very buggy unless you go for the full UI library.

回答4:

You could position one div over another and fade the top one in and out. This will give you a smooth color transition.

Updated example changes gradient on hover
Example: http://jsfiddle.net/PzZNB/22/

来源：https://stackoverflow.com/questions/6767321/how-to-change-slowly-background-attributes-in-jquery

标签

jquery

attributes

background

jquery-animate