JQuery revitalize transparency

Question

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

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

Any solution?

Answer 1

Instead of changing the background color, remove this attribute!

The code is as simple as:

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

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

You need jQuery and jQuery UI to work it. What exactly did you want (except flowers)!

Those numbers in the jQuery script indicate the duration of the animation in milliseconds.

EDIT:

Uhm ... It was discovered that toggleClass may appear from time to time. It is better to use addClass on hover and removeClass on mouse out.

Answer 2

You can 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 });​ 

~~ are gender values, otherwise you will get stuff like rgba(0.1029302...

Answer 3

Edit: I tested this and it works.

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

Animation toggleClass or removeClass for # 000 background class.

Example:

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

CSS

 .blackClass { background: #000; } 

Answer 4

That might work. It adds a new div with the background color onMouseOver, then it disappears and removes the onMouseOut div.

Example.

An example with list items above an image.

Good luck, hope this helps.

Answer 5

Why not use the opacity CSS3 tag?

Answer 6

I think you need to use a color plugin .

Answer 7

This may require some changes to your HTML and CSS (which can be done with a script if you do not have direct HTML / CSS control).

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

Answer 8

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

Answer 9

I got a solution to this problem from this link

 $('#test').animate({ backgroundColor: "#DFC21D", }, 1000, function() { $('#test').css("backgroundColor","transparent"); });