背景图像过渡不起作用

Question

我正在尝试使用没有事件的背景图像进行简单的淡入淡出转换，因为它就像一个横幅。我想设置两个不同的图像，所以我有这个：

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>

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

.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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="banner" class="background1">
  <div class="inner">
    <div class="logo">
      <span class="icon fa-globe"></span>
    </div>
  </div>
</section>

我不知道我做错了什么，有人可以帮助我吗？

Answer 1

您可以使用 Jquery 和 animate() 函数和缓动插件来实现。

插件：https://github.com/gdsmith/jquery.easing

请尝试：

setInterval(function() {
  var $banner = $('#banner');
  if ($banner.hasClass('background1')) {
    $banner.animate({opacity:0},200,"easeInCirc",function(){
      $banner.removeClass('background1');
      $banner.addClass('background2');
      $banner.animate({opacity:1},200)
    })
  }else{
    $banner.animate({opacity:0},200,"easeOutCirc",function(){
      $banner.removeClass('background2');
      $banner.addClass('background1');
      $banner.animate({opacity:1},200)
    })
  }
}, 3000);

.background1 {
  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("http://www.activcompany.com/uploads/pictures/095-ERDF-29-05-12.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat;
}

.background2 {
  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("http://www.myfeelback.com/sites/default/files/erdf-satisfaction-riverain-OG-TC.jpg");
  background-size: auto, cover;
  background-position: center, cover;
  background-repeat: no-repeat;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>


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