Chapter 9 Challenge #1

[Fox9eagle]

I want to thank you for your book. Even though I am not a "kid", I think your book is the best/easy to understand for newbies.

I am having trouble getting the code to work the way I want. The instructions say to make each name fade in... one at a time as I understand it. However, the last item in my array fadeIn first, and then the first two items fadeIn at the same time. I'd appreciate any guidance you could offer on this.

Here is my code:

<title>Playing with the DOM</title>

<h1>Hello World!</h1>

<script src="https://code.jquery.com/jquery-2.1.0.js"></script>
<script>

var friends = ["Katie", "Josh", "Jason"];

for (var i = 0; i < friends.length; i++) {
	$("body").append("<p id=friend>" + friends[i] + "</p>");
	//The line below is where I fadeIn the names. 
	$("p").hide().fadeIn(750);
}

$("h1").text("My Friends:");
$("p").append(" smells");


</script>

[christopher-dodge]

@Fox9eagle , the code below is a way I found to get a similar effect. However, I'm sure there is a better way out there. Did you ever solve this?

// [for loop here]
// after for loop:
$("p").hide();

$("p").first().fadeIn(2000);
$("p").first().next().delay(1000).fadeIn(2000);
$("p").next().delay(2000).fadeIn(2000);

[christopher-dodge]

@Fox9eagle here is another much cleaner way than my previous attempt:

for(var i = 0; i < friends.length; i++){
	$("body").append("<p id='p" + i + "'> " + friends[i] + "</p>");
	$("p#p" + i).hide().delay((i + 1) * 500).fadeIn(1000);
}

@a1ip Thank you for putting this up!
Any suggestions for improvement?