tags:

views:

77

answers:

8
$(".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?

+1  A: 

Instead of changing background color, remove that attribute!

Okay... http://jsfiddle.net/rdWTE/

Here you go, a fiddle. 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 miliseconds.

EDIT:

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

Tom
how to remove it with some animation? like from black to no color
Happy
http://api.jquery.com/animate/ - read through and look how to use duration, easing. With those you can achieve your desired effect!
Tom
often doesn't hide background on mouseout
Happy
P.S. We don't have to give you perfect solution. Try to work it out by yourself, in the end, you will benefit from it!
Tom
A: 

Why not use the opacity CSS3 tag?

Colin
need some animation effect.
Happy
You can animate the opacity value in the same way you're animating the backgroundColor value in your code now.
Colin
A: 

I think you need to use the color plugin.

Sandro
already using this plugin.
Happy
+1  A: 

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; }
Mark
A: 

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.

rhowardiv
+2  A: 

You could use rgba(...) (see browser support here).

var elem = $('#foo')[0];

$({
    r: 0,
    g: 0,
    b: 0,
    a: 1
}).animate({
    a: 0
}, {
    step: function() {
        elem.style.backgroundColor =
            'rgba(' +
                ~~this.r + ',' + ~~this.g + ',' + ~~this.b + ',' +
                ~~(this.a*100)/100 +
            ')';
    },
    duration: 1000
});​

~~ is to floor values, otherwise you'll end up with stuff like rgba(0.1029302....

J-P
A: 

Hey. Try this.

$(".block li").hover(
    function(){
        $(this).animate({backgroundColor: "#000"});
    },
    function(){
        $(this).animate({backgroundColor:  $(this).parent().css("backgroundColor") });
    }
);
Kasturi
This was my initial thought, but this might not work if there is an image for the background.
Sandro
+1  A: 

This might work. It prepends a new div with a background color onMouseOver, then it fades out and removes the div onMouseOut.

Example.

Example with list items over an image.

Good luck, hope this helps.

Sandro