如何用淡入效果改變身體的背景效果

現在我想用淡入效果來改變身體的背景。如何用淡入效果改變身體的背景效果

var imgSrcs = ["img/bg1.jpg","img/bg2.jpg","img/bg3.jpg","img/bg4.jpg","img/bg5.jpg"]; 
 
setInterval(function() { 
 
    $("body").css("background-image", "url(" + imgSrcs[imgSrcs.push(imgSrcs.shift()) - 1] + ")"); 
 
}, 3000);

有這個代碼，它工作正常，但我想添加淡入淡出效果，而它改變。

來源

2014-09-28 user2976078

jQuery的鏈接閱讀起來。 http://www.w3schools.com/jquery/jquery_chaining.asp。您可以將多個方法鏈接在一起。所以你需要添加的是.fadeIn（）方法到你的$（「body」）鏈的末尾。 – 2014-09-29 00:18:56

@TylerEvans我試過了，但它不工作，因爲它淡出了身體的全部內容..我想改變背景不是整個頁面 – user2976078 2014-09-29 00:24:09

是的，這是一個很好的觀點。無論如何，它們看起來都是一個很好的答案。 – 2014-09-29 00:27:50

您可以在一個絕對定位的模擬背景使用fadeIn()和

var imgSrcs =[ 
 
    "http://placehold.it/700x200/&text=bg2.jpg", 
 
    "http://placehold.it/700x200/&text=bg3.jpg", 
 
    "http://placehold.it/700x200/&text=bg4.jpg", 
 
    "http://placehold.it/700x200/&text=bg5.jpg", 
 
    "http://placehold.it/700x200/&text=bg1.jpg" 
 
]; 
 

 
$('.background').fadeIn(1000, animateBackground()); 
 

 
function animateBackground() { 
 
    
 
    window.setTimeout(function(){ 
 
     
 
     var url = imgSrcs[imgSrcs.push(imgSrcs.shift()) - 1]; 
 
     
 
     $('.background').delay(1000).fadeOut(1000, function(){ 
 
       
 
      $(this).css("background-image", "url(" + url + ")") 
 
       
 
     }).fadeIn(1000, animateBackground()) 
 

 
    }); 
 
}

.background { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-repeat: no-repeat; 
 
    z-index: -9999; 
 
    display: none; 
 
    background-image: url('http://placehold.it/700x200/&text=bg1.jpg'); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="background"></div> 
 

 
<h1>Hello World</h1>

或者，您可以使用CSS3過渡

var imgSrcs =[ 
 
    "http://placehold.it/700x200/&text=bg1.jpg", 
 
    "http://placehold.it/700x200/&text=bg2.jpg", 
 
    "http://placehold.it/700x200/&text=bg3.jpg", 
 
    "http://placehold.it/700x200/&text=bg4.jpg", 
 
    "http://placehold.it/700x200/&text=bg5.jpg" 
 
]; 
 

 
setInterval(function() { 
 
    $("body").css("background-image", "url(" + imgSrcs[imgSrcs.push(imgSrcs.shift()) - 1] + ")"); 
 
}, 1000);

body { 
 
    -webkit-transition: background-image 0.5s ease-in-out; 
 
    -moz-transition: background-image 0.5s ease-in-out; 
 
    -ms-transition: background-image 0.5s ease-in-out; 
 
    -o-transition: background-image 0.5s ease-in-out; 
 
    transition: background-image 0.5s ease-in-out; 
 
    background-repeat: no-repeat; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2014-09-29 00:11:44

謝謝:)它工作正常，但看起來像背景的寬度和高度滑動..我們可以做它淡入淡出，然後淡出 – user2976078 2014-09-29 00:32:22

你忘了我:) – user2976078 2014-09-29 01:23:56

用fadeIn fadeOut選項更新。 – 2014-09-29 05:04:07

如何用淡入效果改變身體的背景效果

回答

相關問題