如何在jQuery中将背景颜色设置为透明?

我可以从透明到彩色animation,但是当我告诉jQuery使backgroundColoranimation时:“透明”只是变成了白色。 任何想法如何解决这个问题?

透明不是一个真正的颜色。 所以,你不能animation。 您可以通过为背景使用单独的元素来实现所需的效果,然后使不透明度变为animation效果。

例:

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颜色值,所以你可以animation只是背景。 但是,jQuery不支持核心 – 你需要一个插件 。 另请参阅: jQuery + RGBA彩色animation

我想这样做,因为我无法find它,所以我一起黑了。 这只适用于白色,适合您的需求:

 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); } 

用法:

 $( “A”)。hover(
     function(){return animate_bg($(this),0,10)},
     function(){return animate_bg($(this),10,0)}
 );
 $(selector) .css({backgroundColor:"#f00"}) .animate({backgroundColor:"transparent"}, 2000, null, function() { this.style.backgroundColor='transparent'; }); 

不是那么干净,因为它使bg变白之前使其透明,但它是一个选项。

我用了Linus的回答,但是碰到了IE。 改变了一下在IE中工作:

 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); } 

用法是一样的:

 $("a").hover( function() {return animate_bg($(this), 0, 10)}, function() {return animate_bg($(this), 10, 0)} ); 

您可以使用rgba(61,31,17,0.5)颜色,其中0.5是不透明度。 那么如果你想透明设置不透明度为0.0

 $('.myClass').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000); 

我改变了Shog9的代码,以适应我的需求。 这有点像jQuery用户界面突出显示,只是它不会褪色成白色。 这不是完美的,但它对大多数元素有效

 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); }) ); }); } 

我使用函数参数来删除animation完成后的样式:

 $('[orgID=' + orgID + 'bg]').animate({ backgroundColor: "white" }, 300, "linear", function() { $('[orgID=' + orgID + 'bg]').css('background-color', ''); }); 

它运作良好。

使用jQuery Color插件: https : //github.com/jquery/jquery-color

它会让你的透明以及rgbaanimation正常工作。

你必须链接它。

例如,你不能这样做:

 $('#panel').animate({'backgroundColor' : 'rgba(255,255,0,0.7', 'opacity': 1}, 3000); 

甚至

 $('#panel').animate({'background-color' : 'yellow', 'opacity': 1}, 3000); 

但你可以这样做:

 $('#panel').css('background-color', 'rgba(255,255,0,0.7)').animate({'opacity': 1}, 3000); 

使用CSS转换:

 $('smth').css('transition','background-color 1s').css('background-color','transparent') 

要么

 $('h1').css({'transition':'background-color 1s','background-color':'red'}) 

我的解决scheme是animation到用户看到的颜色(即父元素的颜色),然后设置为原始颜色(可能或可能不是“透明的”),一旦animation完成

 var $t = $(some selector); var seenColour = findColour($t, 'background-color'); var origColour = $t.css('background-color'); $t.css('background-color', '#ffff99'); $t.animate( {backgroundColor: seenColour}, 4000, function(){ $t.css('background-color', origColour)} ); function findColour($elem, colourAttr) { var colour = $elem.css(colourAttr); if (colour === 'transparent') { var $parent = $elem.parent(); if ($parent) { return findColour($parent, colourAttr); } // Default to white return '#FFFFFF'; } return colour; } 

使用背景而不是backgroundColor:

 $('#myDiv').animate({background: "transparent"});