淡入淡出动态更改（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中更改它。