I can animate from transparent to color, but when I tell jquery to animate the backgroundColor: 'transparent' it just changes to white. Any idea how to fix this?
+11
A:
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.
Example:
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()
})
);
});
Shog9
2009-03-19 19:03:31
Nice, clean and elegant.
Atømix
2010-10-06 15:35:13
A:
I changed Shog9's code a bit to fit my needs. It's sort of like the jQuery UI Highlight, only it does not fade into white. It's not perfect, but it works on most elements
function highlight(element, color, speed) {
if (speed == null) speed = "fast";
var e;
var position;
element.each(function() {
e = $(this);
position = e.css('position');
if (position != 'absolute')
e.css('position', 'relative');
log(position);
e.append($("<div>")
.css({
backgroundColor: color,
position: 'absolute',
top: 0,
left: 0,
zIndex: -1,
display: "none",
width: e.width(),
height: e.height()
}).fadeIn(speed).fadeOut(speed, function() { $(this).remove(); e.css('position', position); })
);
}); }
Contra
2009-08-28 08:54:28
+1
A:
$(selector)
.css({backgroundColor:"#f00"})
.animate({backgroundColor:"transparent"}, 2000, null,
function() { this.style.backgroundColor='transparent'; });
Not as clean because it fades the bg to white before making it transparent, but it's an option.
lucky760
2009-11-16 06:03:58
A:
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)}
);
Maarten Wolzak
2010-10-06 15:15:33