淡入淡出動態更改（jQuery）背景圖片？

Question

我在網站上有一個塊，其中包含一些按鈕和背景圖片。

我需要更改背景圖片每隔3秒，所以我有以下的javascript：

jQuery('.myBlock').css({"background-image" : "url(img1)"}); 

var counter = 0; 
function setBckImage(){ 
    if(counter<3){ 
     counter++; 
    } else { 
     counter=1; 
    } 

    switch (counter){ 
     case 1: 
      jQuery('.myBlock').css({"background-image" : "url(img1)"}); 
      break; 
     case 2: 
      jQuery('.myBlock').css({"background-image" : "url(img2)"}); 
      break; 
     case 3: 
      jQuery('.myBlock').css({"background-image" : "url(img3)"}); 
      break; 
    } 
} 

setInterval(setBckImage, 3000); 

其中一期工程，但變化是「突然」，我想這是更光滑，增添了淡入淡出效果。我怎樣才能做到這一點？我看到this answer導致this link，但在此鏈接中，圖像是在div內，它們不是backgroud-image，所以我不明白如何使這個答案適應我的代碼。

有沒有辦法做到這一點？

Answer 1

也許你想要的效果呢？

$('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"}); 
 

 
var counter = 0; 
 
function setBckImage(){ 
 
    if(counter<3){ 
 
     counter++; 
 
    } else { 
 
     counter=1; 
 
    } 
 

 
    switch (counter){ 
 
     case 1: 
 
      jQuery('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"}); 
 
      break; 
 
     case 2: 
 
      jQuery('.myBlock').css({"background-image" : "url(http://nakolenke.club/uploads/posts/2016-09/1473248821_kotiki04.jpg)"}); 
 
      break; 
 
     case 3: 
 
      jQuery('.myBlock').css({"background-image" : "url(http://i.bigmir.net/img/dnevnik/uploads/cmu_1153/29306/1.jpg)"}); 
 
      break; 
 
    } 
 
} 
 

 
setInterval(setBckImage, 3000);

.myBlock { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-size: cover; 
 
    -webkit-transition: background 700ms ease-in 700ms; 
 
    -moz-transition: background 700ms ease-in 700ms; 
 
    -o-transition: background 700ms ease-in 700ms; 
 
    transition: background 700ms ease-in 700ms; 
 
}

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

Answer 2

你只是試圖this

使用此代碼:)

<div id="dvImage" style="height: 308px; width: 410px"> 
</div> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> 
<script type="text/javascript"> 
    var images = ["Chrysanthemum.jpg", "Desert.jpg", "Hydrangeas.jpg", "Jellyfish.jpg", "Koala.jpg", "Lighthouse.jpg", "Penguins.jpg", "Tulips.jpg"]; 
    $(function() { 
     var i = 0; 
     $("#dvImage").css("background-image", "url(images/" + images[i] + ")"); 
     setInterval(function() { 
      i++; 
      if (i == images.length) { 
       i = 0; 
      } 
      $("#dvImage").fadeOut("slow", function() { 
       $(this).css("background-image", "url(images/" + images[i] + ")"); 
       $(this).fadeIn("slow"); 
      }); 
     }, 1000); 
    }); 
</script> 

Answer 3

一種方法就是使用CSS關鍵幀，你可以將它添加到.myBlock

.myBlock{ 
    animation: fadeInOut 3s infinite; 
} 

@keyframes fadeInOut{ 
    0%{ 
    opacity: 0; 
    } 
    20%{ 
    opacity: 1; 
    } 
    80%{ 
    opacity: 1; 
    } 
    100%{ 
    opacity: 0; 
    } 
} 

但要記住，如果你改變3秒的間隔，你必須在css中更改它。