Q:

fadeToggle all elements one at a time

I have three p elements and I would like to fadeToggle through them one at a time. I have tried this a number of ways but with the same incorrect result - all 3 fade in/out at the same time. Not sure what I am missing. I am very new to this.
HTML
<div class="test">
<p class="para"> this is para1</p>
<p class="para"> this is para2 </p>
<p class="para"> this is para3 </p>
</div>

CSS
.test {
background-color:yellow;
width:50%;
height:100px;
}

.para, .show {
display:none;
}

JQ
var i = 0;
while (i<=2) {
  myfade(i);
i++;
}

function myfade(i) {
  var p = $("p");
  ($(p[i])).addClass("show");
  ($(p[i]).delay(500).fadeToggle(2000));
  ($(p[i])).removeClass("show");

    }

A:

.delay(n) sets a timer to delay execution of functions in the queue (for a single statement), not between multiple statements. That is why they all come in at the same time.
To do what you want, you could vary the delay time associated with each paragraph like this:
var i = 0;
while (i<=2) {
    myfade(i);
  i++;
}

function myfade(i) {
  var p = $("p");
  ($(p[i]).delay(i*1000).slideToggle(2000));
}

Here's an example that demonstrates the effect you want, and how delay works and why you were getting your original results. 
http://jsfiddle.net/RvK35/1/

