41
Transparent isn't really a color. So, you can't animate to it. You might be able to achieve the effect you're looking for by using a separate element for the background, and animating the opacity though.
HTML:
<body style="background-color:yellow">
<!-- by default, "see through" to parent's background color -->
<div id="container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Aenean nec magna. Nulla eu mi sit amet nibh pellentesque vehicula.
Vivamus congue purus non purus. Nam cursus mollis lorem.
</div>
</body>
Script:
// on load...
$(function()
{
var container = $("#container");
container
.hover(
// fade background div out when cursor enters,
function()
{
$(".background", this).stop().animate({opacity:0});
},
// fade back in when cursor leaves
function()
{
$(".background", this).stop().animate({opacity:1})
})
// allow positioning child div relative to parent
.css('position', 'relative')
// create and append background div
// (initially visible, obscuring parent's background)
.append( $("<div>")
.attr('class', 'background')
.css({
backgroundColor:'blue',
position: 'absolute',
top:0,
left:0,
zIndex:-1,
width:container.width(),
height:container.height()
})
);
});
Kingjeffrey's comment points out that this answer is somewhat outdated - browsers do now support RGBA color values, so you can animate just the background. However, jQuery doesn't support this in core - you'll need a plugin. See also: answered 2009-03-19T19:03:31.890
I used the answer of Linus but ran into IE. Changed it about a bit to work in IE as well:
function animate_bg(ele, from, to) {
from += from > to ? -1 : 1;
if(!$.support.opacity){
if(from != to){
var opStr = (Math.round(from * 25.5)).toString(16);
//alert(opStr)
ele.css({background:'transparent',filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#" + opStr + "FFFF00, endColorstr=#" + opStr + "FFFF00)"});
}else{
ele.css({background:'transparent',filter:"none"});
}
}else{
ele.css("backgroundColor", "rgba(255, 255, 0, " + (from) / 10 + ")");
}
if(from != to)
setTimeout(function() { animate_bg(ele, from, to) }, 50);
}
Usage is the same:
$("a").hover(
function() {return animate_bg($(this), 0, 10)},
function() {return animate_bg($(this), 10, 0)}
);