Background-image transition not working

Question

I'm trying to do a simple fade-in fade-out transition with a background-image without events, because its like a banner. I want to set two different images so I have this:

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

My CSS is:

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

And the element where I want this effect is like this:

<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>

I dont know what I'm doing wrong so, can someone help me?

Answer 1

You can use Jquery and animate() function with easing plugin for make that.

Plugin: https://github.com/gdsmith/jquery.easing

Please try:

 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>