web-dev-qa-db-ja.com

jQueryで背景色を透明にアニメーション化するにはどうすればよいですか？

私は透明から色にアニメーション化できますが、jQueryにbackgroundColorをアニメーション化するように指示すると、「transparent」は単に白に変わります。これを修正する方法はありますか？

jqueryjquery-uitransparent
40
Casey

透明は実際には色ではありません。そのため、アニメーション化することはできません。背景に別の要素を使用し、不透明度をアニメーション化することで、探している効果を実現できる場合があります。

例：

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カラー値をサポートするようになったため、canは背景のみをアニメーション化します。ただし、jQueryはコアでこれをサポートしていません。 plugin が必要です。参照： jQuery + RGBAカラーアニメーション

22
Shog9

これをやりたかったのですが、見つからなかったので、一緒にハッキングしました。これは、あなたのニーズに合った白専用です：

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)}
);
11
Linus Gustav Larsson Thiel
$(selector)
    .css({backgroundColor:"#f00"})
    .animate({backgroundColor:"transparent"}, 2000, null, 
    function() { this.style.backgroundColor='transparent'; });

透明にする前にbgを白にフェードするため、それほどきれいではありませんが、オプションです。

8
lucky760

Rgba（61、31、17、0.5）色を使用できます。0.5は不透明度です。次に、透明にしたい場合は、不透明度を0.0に設定します

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

CSSトランジションを使用：

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

または

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

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)}
);
2
Maarten Wolzak

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

      );
}); }
1
Contra

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

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

うまくいきました。

1
Porter

チェーンする必要があります。

たとえば、これはできません。

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

JQuery Colorプラグインを使用： https://github.com/jquery/jquery-color

Rgbaアニメーションだけでなく透明も適切に機能します。

1
Ondrej Machulda

BackgroundColorの代わりにbackgroundを使用します。

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

私の解決策は、ユーザーに見える色（つまり、親要素の色）にアニメーション化し、アニメーションが終了したら元の色（「透明」または「透明」ではない）に設定することでした

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