如何在jQuery中的.animate（）之後更改背景圖像的不透明度？

我正在使用jQuery animate(函數，它包含以下內容。如何在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>

我想改變我的background-image不透明度爲：

$("#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，然後更改背景圖像，最後再次將圖像淡化回來，可以獲得類似的效果。

你可以得到更多的交叉作用，通過使在這一個，然後你就可以在褪色上的第二背景股利。

來源

2016-11-05 12:18:32

如何在jQuery中的.animate（）之後更改背景圖像的不透明度？

回答

相關問題