40 jquery jquery-ui transparent
我可以从透明到颜色动画,但是当我告诉jquery为backgroundColor设置动画时:'透明'它只是变为白色.知道如何解决这个问题吗？
Sho*_*og9 22
透明不是真正的颜色.所以,你不能动画它.您可以通过为背景使用单独的元素,然后为不透明度设置动画来实现您正在寻找的效果.
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>
脚本:
// 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的评论指出,这个答案有些过时 - 浏览器现在支持RGBA颜色值,因此您可以只为背景设置动画.但是,jQuery不支持核心 - 你需要一个插件.另请参阅:jQuery + RGBA颜色动画
Lin*_*iel 11
我想这样做,因为我找不到它,我把它一起砍掉了.这仅适用于白色,适合您的需求:
function animate_bg(ele, from, to) {
ele.css("background-color", "rgba(255, 255, 255, " + (from += from > to ? -1 : 1) / 10 + ")");
if(from != to)
setTimeout(function() { animate_bg(ele, from, to) }, 20);
}
用法:
__CODE__.IE6会破解.
您可以选择给出__CODE__宽度
$("a").hover(
function() {return animate_bg($(this), 0, 10)},
function() {return animate_bg($(this), 10, 0)}
);
Run Code Online (Sandbox Code Playgroud)
function animate_bg(ele, from, to) {
ele.css("background-color", "rgba(255, 255, 255, " + (from += from > to ? -1 : 1) / 10 + ")");
if(from != to)
setTimeout(function() { animate_bg(ele, from, to) }, 20);
}
小智 8
$(selector)
.css({backgroundColor:"#f00"})
.animate({backgroundColor:"transparent"}, 2000, null,
function() { this.style.backgroundColor='transparent'; });
不是那么干净,因为它会使bg变成白色,然后再变透明,但这是一个选择.
您可以使用 rgba(61, 31, 17, 0.5) 颜色，其中 0.5 是不透明度。然后，如果你想要透明，请将不透明度设置为 0.0
$('.myClass').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000);
| 归档时间： |
|
| 查看次数： |
63083 次 |
| 最近记录： |