Question

$(".block li").hover(
    function(){
        $(this).animate({backgroundColor: "#000"});
    },
    function(){
        $(this).animate({backgroundColor: "#fff"});
    }
);

Need to change #fff to no color. Animation should occur from #000 to transparent.

Any solution?

Answer 1

Instead of changing background color, remove that attribute!

The code is as simple as:

$("li").hover(
    function(){
        $(this).toggleClass('hover', 1000);
    },
    function(){
        $(this).toggleClass('hover', 2000);
    }
);

Example: http://jsfiddle.net/rdWTE/

For it to work, you need jQuery and jQuery UI. Does exactly what you wanted (except the colors)!

Those numbers in jQuery script stand for animation duration in milliseconds.

EDIT:

Uhm… Found out that toggleClass can bug from time to time. Better to use addClass on hover, and removeClass on mouse out.