淡化动态变化的（jQuery）背景图像？答案

【问题标题】：Fading a dynamically changed (jQuery) background image?淡化动态变化的（jQuery）背景图像？
【发布时间】：2016-12-16 09:45:54
【问题描述】：

我正在处理的网站上有一个块，其中包含一些按钮和背景图像。

我需要每 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 内，它们不是背景图像，所以我不明白如何使这个答案适应我的代码。

有没有办法做到这一点？

【问题讨论】：

标签： javascript jquery html css fading

【解决方案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>

【讨论】：

这正是我想要的！谢谢！

【解决方案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>

【讨论】：

嗨@Florian.C 你在那里

【解决方案3】：

一种方法是使用 css 关键帧，您可以将其添加到 .myBlock

.myBlock{
  animation: fadeInOut 3s infinite;
}

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

但请记住，如果您更改 3 秒间隔，您也必须在 css 中更改它。

【讨论】：