Question

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

Answer 1

透明不是真正的颜色。所以，你不能动画它。您可以通过为背景使用单独的元素，然后为不透明度设置动画来实现您正在寻找的效果。

实施例

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不支持核心 - 你需要一个plugin。另见：jQuery + RGBA color animations

Answer 2

我想这样做，因为我找不到它，我把它一起砍掉了。这仅适用于白色，符合您的需求：

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

Answer 3

$(selector)
    .css({backgroundColor:"#f00"})
    .animate({backgroundColor:"transparent"}, 2000, null, 
    function() { this.style.backgroundColor='transparent'; });

不那么干净，因为它会使bg变成白色，然后才会变透明，但这是一个选择。

Answer 4

您可以使用rgba（61,31,17,0.5）颜色，其中0.5是不透明度。然后，如果要透明，则将不透明度设置为0.0

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

Answer 5

我使用了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)}
);

Answer 6

使用CSS转换：

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

或

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

Answer 7

我改变了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); })

      );
}); }

Answer 8

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

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

效果很好。

Answer 9

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

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

Answer 10

你必须把它链起来。

例如，你不能这样做：

$('#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);

Answer 11

我的解决方案是动画显示用户看到的颜色（即父元素的颜色），然后在动画结束后设置为原始颜色（可能是也可能不是'透明'） / p>

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

Answer 12

使用background而不是backgroundColor：

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

如何在jQuery中将背景颜色设置为透明动画？

12 个答案:

实施例