CODEWITHSUNDEEP
javascripthtmlslideshow
rootsup
rootsup

Reputation: 315

Javascript slideshow fading issue - not seamless

Images show below when fading, changing the content box, not seamless - it should fade out before the new image shows... not sure what's up.

http://jsfiddle.net/ucswr/

$("#aboutslideshow > div:gt(0)").hide();

setInterval(function() { 
$('#aboutslideshow > div:first')
.fadeOut(1000)
.next()
.fadeIn(1000)
.end()
.appendTo('#aboutslideshow');
},  4200);

Upvotes: 1

Views: 52

Answers (1)

PSL
PSL

Reputation: 123739

Use the complete callback of fadeOut so that the next item fades in only after the other one has faded out. The reason for the behavior you are seeing is due to the async nature of fade functions. With your code snippet, it kicks off both fadeout and fadeIn without the previous animation being completed.

var $slideContainer = $("#aboutslideshow");
$slideContainer.children("div:gt(0)").hide();

setInterval(function () {
    $slideContainer.children('div:first')
        .fadeOut(1000, function () {
        $(this).next()
            .fadeIn(1000)
            .end()
            .appendTo($slideContainer);
    })

}, 4200);

Demo

Upvotes: 1

Related Questions