jqueryで.animate（）の後で背景画像の不透明度を変更するにはどうすればいいですか？

私はjQuery animate(関数を使って作業しており、以下を含んでいます。私は次のように私のbackground-image不透明度を変更したいjqueryで.animate（）の後で背景画像の不透明度を変更するにはどうすればいいですか？

$(document).ready(function(){ 
    setInterval(function(){ 
     $("#animate1").fadeIn('slow').animate({ 
      'margin-left': '150px', 
      'margin-bottom': '50px' 
     }, 2000).fadeOut(); 

     $("#animate1").fadeIn('slow').animate({ 
      'margin-bottom': '0px', 
      'margin-left': '-140px' 
     }, 2000).fadeOut(); 
    }, 300); 
});

<div style="background-image:url('img/sofa.jpg');"> 
    <div id="animate1"> 
     <img src="img/chotu.png" style="height:200px; width:200px;"/> 
    </div> 
</div>

：

$("#animate1").fadeIn('slow').animate({ 
    'margin-left': '150px', 
    'margin-bottom': '50px' 
}, 2000)./* change bg-opacity here */.fadeOut();

それは可能ですか？最初のアニメーション機能の後で背景画像の不透明度を変更したいだけです。

出典

2016-11-05 Maulik

あなたは直接背景の不透明度に影響を与えることができません。要素全体の不透明度のみを変更することができます。また、要素の背景の不透明度を同じインスタンスで変更していない場合、その要素を完全に冗長にフェードアウトしますか？ –

擬似要素を使用することができます。https://scotch.io/tutorials/how-to-change-a-css-background-images-opacity –

<body> 
    <div id="bg"></div> 
    ... 
</body>

あなたは同じ幅でCSSを使用したページとしてそれを行うことができます。

#bg { 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
}

そして、それは性質だアニメーション。

$('#bg') 
    .animate({opacity: 0}, 'slow', function() { 
     $(this) 
      .css({'background-image': 'url(1.jpg)'}) 
      .animate({opacity: 1}); 
    });

その後、背景画像を変更するには、0に画像の不透明度をフェージングにより同様の効果を得ること、そして最終的に戻って再度画像を退色することができます。

あなたは、その後にフェードインすることができ、この1の上に第2の背景のdivを持つことで、クロスオーバー効果の多くを得ることができる。

出典

2016-11-05 12:18:32

jqueryで.animate（）の後で背景画像の不透明度を変更するにはどうすればいいですか？

答えて

関連する問題