CODEWITHSUNDEEP
javascript
Qriyo
Qriyo

Reputation: 43

Changing background images with js

Im trying to work out script that will change background images every 3 sec using fadeIn, fadeOut, addClass and removeClass. Is there a better way to do it using setInterval?

$("document").ready(function () {

 $("#bg").delay(3000);
 $("#bg").fadeOut(300);
 $("#bg").removeClass('bg1');
 $("#bg").addClass('bg2');
 $("#bg").fadeIn(300);

 $("#bg").delay(3000);
 $("#bg").fadeOut(300);
 $("#bg").removeClass('bg2');
 $("#bg").addClass('bg1');
 $("#bg").fadeIn(300);


});

btw. its not working properly.

HTML:

<div id="bg" class="ShowBG bg1"></div>

CSS:

#bg{
position:absolute;
width:100%;
height:70%;
background-size:cover;
background-position:center;
display:none;
}
.bg1{background-image:url("/img/index/bg1.png");}
.bg2{background-image:url("/img/index/bg2.png");}

Upvotes: 0

Views: 791

Answers (3)

zer00ne
zer00ne

Reputation: 43860

Edit

Just noticed OP wants fading so I added a simple CSS transition and opacity properties to both classes and #bg.

Use toggleClass(). Not sure why you used display:none so I removed it. Also I added the dimensions to html and body so your div has something to relate it's percentage lengths with.

Demo

setInterval(function() {
  $('#bg').toggleClass('bg1 bg2');
}, 3000);
html,
body {
  height: 100%;
  width: 100%
}

#bg {
  position: absolute;
  width: 100%;
  height: 70%;
  background-size: cover;
  background-position: center;
  opacity:1;
  transition:all 1s;
}

.bg1 {
  background-image: url("http://placehold.it/500x250/00f/eee?text=BG1");
  opacity:1;
  transition:all 1s;
}

.bg2 {
  background-image: url("http://placehold.it/500x250/f00/fff?text=BG2");
  opacity:1;
  transition:all 1s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>

Upvotes: 1

Marcin Pevik
Marcin Pevik

Reputation: 173

Use callback of fadeOut() method (see complete parameter here) to perform class change when the animation is done. Otherwise the class will swap while the animation is still going.

There is no better way than using setInterval() if you want to do it automatically and continuously.

Here is working example:

$("document").ready(function () {
 var bg = $("#bg");
 setInterval(function() {
    // We fadeOut() the image, and when animation completes we change the class and fadeIn() right after that.
    bg.fadeOut(300, function() {
     bg.toggleClass('bg1 bg2');
     bg.fadeIn(300);
    });
 }, 1500);

});
#bg {
  position:absolute;
  width:100%;
  height:70%;
  background-size:cover;
  background-position:center;
}
.bg1 {
  background-image: url("https://www.w3schools.com/css/img_fjords.jpg");
}
.bg2 {
  background-image: url("https://www.smashingmagazine.com/wp-content/uploads/2015/06/10-dithering-opt.jpg");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="bg" class="ShowBG bg1"></div>

Upvotes: 1

Jonas Grumann
Jonas Grumann

Reputation: 10786

Your method should work just fine but it's not the best way to write it: what if your graphic designer suddenly decides to add another background image in the cycle? Your code could become pretty long pretty fast. Here's how I would do it:

var backgroundClasses = ['bg1', 'bg2']; // Store all the background classes defined in your css in an array
var $element = $('.container'); // cache the element we're going to work with
var counter = 0; // this variable will keep increasing to alter classes

setInterval(function() { // an interval
	counter++; // increase the counter
	$element.fadeOut(500, function() { // fade out the element
  	$element.removeClass(backgroundClasses.join(' ')). // remove all the classes defined in the array
    addClass(backgroundClasses[counter % backgroundClasses.length]). // add a class from the classes array
    fadeIn(500); // show the element
  });
}, 3000)
.container {
  width: 100vw;
  height: 100vh;
}

.bg1 {
  background-color: red;
}

.bg2 {
  background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container bg1"></div>

The hardest part of the code is this:

$element.addClass(backgroundClasses[counter % backgroundClasses.length])

It basically adds one of the classes stored in the backgroundClasses array. Using the modulo operator (%) on the counter will basically start over every time it has reached the end of the array, counting 0, 1, 0, 1, 0, 1 if you're array is only 2 elements long. If it's 3 elements long it counts 0, 1, 2, 0, 1, 2, ... and so on. Hope that makes sense.

Upvotes: 2

Related Questions