CODEWITHSUNDEEP
jquery
PruitIgoe
PruitIgoe

Reputation: 6384

jquery cycling through images

I have a page where I cycle through the images on the page using this code: 

$('#summaryContainer img:gt(0)').hide();
    setInterval(function(){
        $('#summaryContainer :first-child').fadeOut(summary.speed)
            .next('img').fadeIn(summary.speed)
            .end().appendTo('#summaryContainer');}, 
      summary.pause);

Works fine...until, you leave the page and come back. Then before the cycle begins it flashes the last image, then goes to the first. Any idea what is causing that?

Upvotes: 1

Views: 102

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

jsBin demo

Using .stop() and .fadeTo() and img:first is the key

$('#summaryContainer img:gt(0)').hide();
setInterval(function(){
    $('#summaryContainer img:first').stop().fadeTo(summary.speed, 0)
        .next('img').fadeTo(summary.speed, 1)
        .end().appendTo('#summaryContainer');
},summary.pause);

Upvotes: 0

orolo
orolo

Reputation: 3951

Try setting the css display property:

#summaryContainer img {
    display: none;
}

Then, instead of your first line (which we take care of in css), fadeIn your first image:

$('#summaryContainer img:gt(0)').fadeIn();

This should make all images hidden and then fadeIn that first image smoothly.

So, I guess the whole thing would look like this:

 $('#summaryContainer img:gt(0)').fadeIn();
 setInterval(function(){
    $('#summaryContainer :first-child')
         .fadeOut(summary.speed)
         .next('img').fadeIn(summary.speed)
         .end().appendTo('#summaryContainer');}, 
 summary.pause);

Plus that css rule. Something like that.

Upvotes: 3

Related Questions