You can't set a time for the css function. If you want to animate something you'll have to use animate or one of the other built in functions like fadeIn, fadeOut, fadeTo, hide, show, slideDown, etc.

What exactly are you trying to do? It might be possible to use CSS3 transitions to animate something, depending on what it is.

This can be accomplished using the hover method. Nothing crazy going on here, when the user hovers over any div with a class of hover. I'm using a data attribute on each div to 'store' the next background. If there is no background, nothing will happen.


I also made a visual for ye.

http://jsfiddle.net/mattgoucher/6tpC4/6/

Let me know if you need any further help.

Matt.

$(document).ready(function(){
    $('.hover').hover(
        function(){
            // On Mouse On
            var background = $(this).attr('data-background');
	    if ( !background ) { return; } 
            $(this)
                .css('background','url(' + background + ')')
                .children('img')
                .fadeOut('fast');
        },
        function(){
            // On Mouse Off
            $(this)
                .children('img')
                .fadeIn('fast');
        }    
    );
});

The concept can be used easily for any type of hover.

As for the if statement, it would help if you read it out loud.

if Not background, return.

Which means, if the background variable does not exist (or is empty) the script will return false.

Also, Like Mottie was saying above. If its for somthing like a navigation bar, you may be able to sneak past with a little css3 transition. Somthing like;

#myID {
-webkit-transition: background 1s ease-out;
-moz-transition: background 1s ease-out;
-o-transition: background 1s ease-out;
transition: background 1s ease-out;
}