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) color を使用できます。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

CSS トランジションを使用する:

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

また

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

関数パラメーターを使用して、アニメーションが完了した後にスタイルを削除しました。

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

それはうまくいきました。

于 2011-06-29T18:54:11.847 に答える
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 に答える
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 に答える