CODEWITHSUNDEEP
jquerycssbackground-imagecss-transitions
Alex Marco
Alex Marco

Reputation: 23

Background-image transition not working

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?

Upvotes: 2

Views: 123

Answers (1)

P. Frank
P. Frank

Reputation: 5745

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>

Upvotes: 1

Related Questions