Hey guys,

 

Can anyone tell me why this simple slideshow keeps jumping? I'm sure it's something obvious that I'm missing. Thought it was the slideshow but tried 3 different ones and used the slider elsewhere where it's working.

 

It seems almost as if the first slide is taking too long to fade out? I've changed the speed settings numerous times though.

 

Help much appreciated

 

Cheers,

Chris

It seems to be because the replacement image is loaded before the transition/fade on the old one is complete, so at times you have two images (one fading in the other fading out) and others one image, resulting in jumping.

 

Debugging the JS is a bit beyond me I'm afraid, but the suggestions at http://stackoverflow.com/questions/15212748/fadeout-fadein-jquery-jump will hopefully be relevant and helpful to you.

It's the .fadeOut(1000) in the SetInterval thats causing the issue.

 

Change your code to this:

 

setInterval(function() { 
			  $('#slideshow > div:first')
			    .hide()
			    .next()
			    .fadeIn(1000)
			    .end()
			    .appendTo('#slideshow');
			},  3000);

I've placed a .hide() instead of fadeOut(1000).

 

Demo here: http://jsfiddle.net/4aaBv/

Thanks guys & thanks Lyndsey that worked fantastic. Your a star!

 

Is there any way to stop the "gap" in the fade? http://hireboats2go.co.uk/phppcdemo/ so it was just one fade in to next? Sorry to pester

Edited January 27, 201412 yr by Crispy

Not sure if this is what your after ?

test

Not sure if this is what your after ?

 

test

 

That does work much better, on the original version I noticed that if the page is slow to load the first image will jump and no fade in or out is working on any images when this happens. But on this test version that holds the first image longer while loading the issue is solved.

Thanks that works brilliantly much smoother !