Jquery 背景图像转换不工作

我试图用一个没有事件的背景图像做一个简单的淡入淡出转换，因为它就像一个横幅。我想设置两个不同的图像，因此我有：

setInterval(function() {
  var $banner = $('#banner');
  if ($banner.hasClass('background1')) {
    $banner.removeClass('background1');
    $banner.addClass('background2');
  } else {
    $banner.removeClass('background2');
    $banner.addClass('background1');
  }
}, 3000);

我的CSS是：

.background1 {
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/fondo.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat, no-repeat;
}

.background2 {
  -webkit-transition: background-image 0.2s ease-in-out;
  transition: background-image 0.2s ease-in-out;
  padding: 7em 0 8.25em 0;
  margin-bottom: -6.5em;
  background-image: linear-gradient(to top, rgba(46, 49, 65, 0.8), rgba(46, 49, 65, 0.8)), url("../../images/fondo_.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat, no-repeat;
}

我想要这种效果的元素是这样的：

<section id="banner" class="background1">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-globe"></span>
    </div>
  </div>
</section>

。背景1{
-webkit过渡：背景图像0.2s易入易出；
过渡：背景图像0.2s缓进缓出；
填充：7em0 8.25em0；
边缘底部：-6.5em；
背景图像：线性渐变（到顶部，rgba（46,49,65,0.8），rgba（46,49,65,0.8）），url（“../../images/fondo.jpg”）；
背景尺寸：自动，封面；
背景位置：中心、封面；
背景重复：不重复，不重复；
}
.背景2{
-webkit过渡：背景图像0.2s易入易出；
过渡：背景图像0.2s缓进缓出；
填充：7em0 8.25em0；
边缘底部：-6.5em；
背景图像：线性渐变（到顶部，rgba（46,49,65,0.8），rgba（46,49,65,0.8）），url（“../../images/fondo_u2;.jpg”）；
背景尺寸：自动，封面；
背景位置：中心、封面；
背景重复：不重复，不重复；
}

---

您可以使用

Jquery

和

animate（）

函数和easing插件来实现这一点

插件：

请尝试：

setInterval（函数（）{
var$banner=$（“#banner”）；
if（$banner.hasClass（'background1'））{
$banner.animate（{opacity:0}，200，“easeincrc”，function（）{
$banner.removeClass（'background1'）；
$banner.addClass（'background2'）；
$banner.animate（{opacity:1}，200）
})
}否则{
$banner.animate（{opacity:0}，200，“easeOutCirc”，function（）{
$banner.removeClass（'background2'）；
$banner.addClass（'background1'）；
$banner.animate（{opacity:1}，200）
})
}
}, 3000);
。背景1{
填充：7em0 8.25em0；
边缘底部：-6.5em；
背景图像：线性渐变（到顶部，rgba（46,49,65,0.8），rgba（46,49,65,0.8）），url（“http://www.activcompany.com/uploads/pictures/095-ERDF-29-05-12.jpg");
背景尺寸：自动，封面；
背景位置：中心、封面；
背景重复：无重复；
}
.背景2{
填充：7em0 8.25em0；
边缘底部：-6.5em；
背景图像：线性渐变（到顶部，rgba（46,49,65,0.8），rgba（46,49,65,0.8）），url（“http://www.myfeelback.com/sites/default/files/erdf-satisfaction-riverain-OG-TC.jpg");
背景尺寸：自动，封面；
背景位置：中心、封面；
背景重复：无重复；
}

背景尺寸中没有逗号：自动，封面；背景位置：中心、封面；背景重复：不重复，不重复我已经删除了逗号，但仍然没有使用逗号，现在我有了另一个问题，我有了另一个div和一个span，他们也在隐藏和制作动画。我尝试在脚本上设置：var$banner=$（“#banner”）。而不是（“.inner”）；但它们仍在消失。