jquery骑自行车穿过图像

Question

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?

Answer 1

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.

Answer 2

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);