jQuery animate to transparent

Question

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


        

Answer 1

Edit: I have tested this and it works.

Create two classes. One with background: #000 and one with background: transparent;

Animate the toggleClass or removeClass for the #000 background class.

example:

jQuery('.block li').hover(function() {
  $(this).toggleClass('blackClass', 'fast' );
}

CSS:

.blackClass { background: #000; }

Answer 2

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.

Answer 3

I got a solution to this issue from this link

$('#test').animate({

backgroundColor: "#DFC21D",

}, 1000, function() {

$('#test').css("backgroundColor","transparent");

});

Answer 4

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

Answer 5

This may require some change to your HTML and CSS (which could be effected by script if you don't have direct HTML/CSS control).

I would split each '.block li' element into two elements: one that will be the background element that can be animated with $.fadeTo(), and another element laid over the top that will contain your foreground content and on which you can call $.hover() with your handlers.

Answer 6

I think you need to use the color plugin.