Although one of the issues described here is a duplicate of JavaScript closure inside loops – simple practical example, there are other issues like infinite recursive call of changeBack.
I think a better approach will be
/* jshint loopfunc:true */
var url = ["http://protiumdesign.com/wp-content/uploads/2015/04/Material-Design-Background-1024.jpg", "http://i.imgur.com/wt4NRqA.jpg", "http://i0.wp.com/thezinx.com/wp-content/uploads/md-6.png"];
$(document).ready(function() {
var i = 0;
function changeBack() {
$('#elem').fadeTo('slow', 0.3, function() {
$(this).css('background-image', 'url(' + url[i++] + ')');
i = i < url.length ? i : 0
}).fadeTo('slow', 1).delay(1000).promise().done(changeBack);
}
changeBack();
});#elem {
width: 500px;
height: 300px;
background-size: 100%;
background-color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='elem'></div>
Arun P Johny
- 388.7k
- 68
- 532
- 532