1,105,225 Community Members

jQuery image fade problem

Member Avatar
elbeato
Light Poster
33 posts since Jun 2005
Reputation Points: 0 [?]
Q&As Helped to Solve: 4 [?]
Skill Endorsements: 0 [?]
 
0
 

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);
}
})
Member Avatar
AleMonteiro
Master Poster
758 posts since Aug 2010
Reputation Points: 115 [?]
Q&As Helped to Solve: 143 [?]
Skill Endorsements: 29 [?]
 
0
 

Try this:

for (var n = 1; n < 4; n++) 
		{
			var zing = "#img" + n;
					
			$(zing)
				.fadeToggle(300).delay(500)
				.fadeToggle(2000).delay(2000);
		}
You
This article has been dead for over three months: Start a new discussion instead
Post:
Start New Discussion
Tags Related to this Article