Okay, enough's enough, I need some help.

I've been trying to do a simple loop to fade three images in and out, one after another [ids are img1, img2, img3].

The code below only does the third image, and other things I've tried either do the same image three times, loop through the images in rapid succession, or crash everything, I think because the for loop executes too fast.

So basically what I need is a way to either pause the loop until the animation is complete, or rethink the entire code (it shouldn't be this hard! I swear I don't suck at this.)

$("#play").click(function(){

for (n = 1; n = 3; n++) {
		
var zing = "#img" + n;
		
$(zing).fadeToggle(300)
.delay(500)
.fadeToggle(2000)
			
delay(2000);
}
})

Try this:

for (var n = 1; n < 4; n++) 
		{
			var zing = "#img" + n;
					
			$(zing)
				.fadeToggle(300).delay(500)
				.fadeToggle(2000).delay(2000);
		}
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.