JavaScript slideshow not smoothly transitioning

I'm trying to build a JavaScript slideshow using jQuery, but am not getting very far.  Right now, the image fades out, but the next images in the array start flickering in while the whole thing continues to fade in and out.  Any thoughts?
function slideImages1() {
	var slideShow1 = new Array('slide1_1.jpg', 'slide1_2.jpg', 'slide1_3.jpg', 'slide1_4.jpg');
	var s=0;
	function slowDown() {
		$("#slide1").fadeOut(2000).;
		$("#slide1").html("<img src='images/slide/"+slideShow1[s]+"' class='curve' width='199' height='133' style='display: block' />").fadeIn(2000);
		if(s > 3) {
			slideImages1();
		} else {
			s++;
			setTimeout(slowDown, 2000);
		}
	}
	slowDown();
}
setInterval("slideImages1()", 5000);

Open in new window

LVL 1
pingeyegAsked:
Who is Participating?
 
Ovid BurkeConsultant InstructorCommented:
I would recommend that you use the jQuery Cycle plugin: http://jquery.malsup.com/cycle/
0
 
sylenixCommented:
you've set setInterval() too high than your timer. in order for you to achieve a smooth transition you must divide your timer into fractions so that the animation will appear smooth.

say, if you've set your timer to 2 seconds then chop it into ten so that'll be 200 milliseconds or your timer will fire up 10 times before the transition gets done, it'll be smoother that way.
0
 
pingeyegAuthor Commented:
That doesn't seem to help matters any.
0
 
pingeyegAuthor Commented:
Thanks for the info.  Works great.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.