如何在jQuery中更改.animate（）之后的背景圖像不透明度？
[英]How to change background-image opacity after .animate() in jquery?
問題描述
我正在使用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();
可能嗎？ 我只想在執行第一個動畫功能后更改背景圖像的不透明度。
1 個解決方案
解決方案1
0 2016-11-05 12:18:32
<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，然后更改背景圖像，最后再次使圖像漸變，您可以獲得類似的效果。
通過在該背景之上添加第二個背景div，您可以獲得更多的交叉效果，然后可以淡入。
無法更改背景圖片：axios之后通過jquery鏈接的網址
[英]Unable to change background-image: url of a link by jquery after axios
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.