We're a community of 1077K IT Pros here for help, advice, solutions, professional growth and fun. Join us!
1,076,374 Members — Technology Publication meets Social Media
Username:
Password:
Lost login information?
Start New Discussion Reply to this Discussion

jQuery image fade problem

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);
}
})
2
Contributors
1
Reply
21 Hours
Discussion Span
1 Year Ago
Last Updated
2
Views
elbeato
Light Poster
33 posts since Jun 2005
Reputation Points: 10
Solved Threads: 4
Skill Endorsements: 0

Try this:

for (var n = 1; n < 4; n++) 
		{
			var zing = "#img" + n;
					
			$(zing)
				.fadeToggle(300).delay(500)
				.fadeToggle(2000).delay(2000);
		}
AleMonteiro
Master Poster
752 posts since Aug 2010
Reputation Points: 129
Solved Threads: 140
Skill Endorsements: 23

This article has been dead for over three months: Start a new discussion instead

Post: Markdown Syntax: Formatting Help
 
You
 
© 2013 DaniWeb® LLC
Page rendered in 0.0923 seconds using 2.74MB