我可以动画从透明到颜色,但是当我告诉jquery动画的backgroundColor:’transparent’它只是改变为白色。任何想法如何解决这个?
解决方法
透明不是真的是一种颜色。所以,你不能动画。你可以通过使用一个单独的元素为背景,并动画的不透明度,虽然实现你要找的效果。
@H_403_6@例:
@H_403_6@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>@H_403_6@脚本:
// 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() }) ); });@H_403_6@Kingjeffrey的评论指出,这个答案有点过时 – 浏览器现在支持RGBA颜色值,所以你可以只为背景动画。但是,jQuery不支持在核心 – 你将需要一个plugin.参见:jQuery + RGBA color animations