40

我可以从透明动画到颜色，但是当我告诉 jquery 动画 backgroundColor: 'transparent' 它只是变成白色。知道如何解决这个问题吗？

4

12 回答 12

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 颜色动画

于 2009-03-19T19:03:31.890 回答
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);
}

用法： 

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

于 2010-03-17T00:12:11.050 回答
8 
$(selector)
    .css({backgroundColor:"#f00"})
    .animate({backgroundColor:"transparent"}, 2000, null, 
    function() { this.style.backgroundColor='transparent'; });

不那么干净，因为它在使背景透明之前将背景淡化为白色，但这是一种选择。

于 2009-11-16T06:03:58.413 回答
5

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

$('.myClass').animate({ "backgroundColor" : "rgba(61, 31, 17, 0.0)" }, 1000);
于 2012-05-01T18:17:49.857 回答
2

我使用了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)}
);
于 2010-10-06T15:15:33.857 回答
2

Use CSS transition:

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

or

$('h1').css({'transition':'background-color 1s','background-color':'red'})
于 2015-12-31T21:33:37.033 回答
1

你必须把它锁起来。

例如，您不能这样做：

$('#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);
于 2013-01-09T13:42:00.607 回答
1

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

它将使您的透明动画和 rgba 动画正常工作。

于 2012-09-11T13:19:34.223 回答
1

我稍微更改了 Shog9 的代码以满足我的需要。它有点像 jQuery UI Highlight，只是它不会变成白色。它并不完美，但它适用于大多数元素

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

      );
}); }
于 2009-08-28T08:54:28.933 回答
1

动画完成后，我使用函数参数删除样式：

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

效果很好。

于 2011-06-29T18:54:11.847 回答
0

我的解决方案是动画到用户看到的颜色（即父元素的颜色），然后在动画完成后设置为原始颜色（可能是也可能不是“透明”）

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;
}
于 2012-04-04T01:27:48.017 回答
0

使用背景而不是背景颜色：

$('#myDiv').animate({background: "transparent"});
于 2015-05-20T17:29:32.320 回答