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

James
  • 42,081
  • 53
  • 136
  • 161
  • have you tried `transparent`? Does it not work? It is valid CSS. Not sure about animation support with jQuery. – KP. Sep 09 '10 at 19:27
  • transparent doesn't work – James Sep 09 '10 at 19:29
  • 1
    possible duplicate of [How do I animate a background color to transparent in jQuery?](http://stackoverflow.com/questions/663568/how-do-i-animate-a-background-color-to-transparent-in-jquery) – JasCav Sep 09 '10 at 19:39
  • @JasCav, dear captain evidence, there is no good solution in that topic – James Sep 09 '10 at 19:48
  • 1
    @WorkingHard - There is no ACCEPTED solution. Doesn't mean there isn't one. Secondly, your question is exactly the same as the other. At the very least, you could have pointed it out in your question and said, "Already tried this stuff...doesn't work." If you go that route, then people will know you've seen/tried it and duplicates won't be marked. – JasCav Sep 09 '10 at 19:53
  • 2
    There's nothing wrong with asking a question again, especially if all avenues have yet to be explored. The *close* brigade should back off! – James Sep 09 '10 at 20:49

9 Answers9

4

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....

James
  • 109,676
  • 31
  • 162
  • 175
3

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.

Community
  • 1
  • 1
tomsseisums
  • 13,168
  • 19
  • 83
  • 145
  • how to remove it with some animation? like from black to no color – James Sep 09 '10 at 19:30
  • http://api.jquery.com/animate/ - read through and look how to use duration, easing. With those you can achieve your desired effect! – tomsseisums Sep 09 '10 at 19:49
  • often doesn't hide background on mouseout – James Sep 09 '10 at 20:17
  • 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! – tomsseisums Sep 09 '10 at 20:36
  • -1 for linking jsfiddle and not providing code here. Please notify me when you fix it, I will remove the downvote. – Tomas Apr 17 '14 at 19:34
  • @TMS Edited. But man, you really must be bored to stumble upon an old post (posted before the required code example rule) and downvote it only because rules have changed a year later. – tomsseisums Apr 17 '14 at 19:56
  • jolt, done :-) I am not bored, I am just trying to solve [similar problem](http://stackoverflow.com/q/23142051/684229). I am not into rules man, but it is really bothering me, and I wanted to motivate you for quick action (Be honest: would you do it if I didn't downvote? :-) – Tomas Apr 17 '14 at 20:00
  • @TMS you make a good point, though, I might (not saying, I'd 100% do it) have also edited it without downvote, knowing that that's in the rules now. – tomsseisums Apr 17 '14 at 20:04
2

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
  • 5,680
  • 2
  • 25
  • 26
1

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
  • 4,761
  • 1
  • 34
  • 41
0

Why not use the opacity CSS3 tag?

Colin
  • 10,447
  • 11
  • 46
  • 54
  • You can animate the opacity value in the same way you're animating the backgroundColor value in your code now. – Colin Sep 09 '10 at 20:09
0

I think you need to use the color plugin.

Sandro
  • 4,761
  • 1
  • 34
  • 41
0

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
  • 171
  • 1
  • 5
0

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

Kasturi
  • 3,335
  • 3
  • 28
  • 42
  • This was my initial thought, but this might not work if there is an image for the background. – Sandro Sep 09 '10 at 21:54
0

I got a solution to this issue from this link

$('#test').animate({

backgroundColor: "#DFC21D",

}, 1000, function() {

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

});
NoNaMe
  • 6,020
  • 30
  • 82
  • 110
Ratul Nandi
  • 1
  • 1