如何在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"});
