NZMAI NZMAI - 4 months ago 8
jQuery Question

Improve image slider animation

How can i improve image slider transition. It is rather erratic. I want it to be smooth (smooth in and out properly). The problem is image only fadeIn, i cannot figure out how to fadeOut.

var nextimage = 0;
var timer = 0;
doSlideshow();

function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}
$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")')
.fadeIn(3000, function() {
timer = setTimeout(doSlideshow, 3000);
});
}

$(".col-md-8").hover(function() {
clearTimeout(timer);
});

$(".col-md-8").mouseout(function() {
setTimeout(doSlideshow, 3000);
});


Pen

Answer

I have fixed this for you, you do not need settimeout for this kind of stuff, there are many other ways.

function doSlideshow() {
if (nextimage >= images.length) {
nextimage = 0;
}

$('.col-md-8')
.css('background-image', 'url("' + images[nextimage++][0] + '")');
$('.col-md-8').hide().fadeIn(3000).fadeOut(2000, function() {
doSlideshow()
});
}

Link to codepen, there is bit more to say about this, which I will do later.

http://codepen.io/damianocel/pen/PzQwNr

Comments