淡入淡出所有元素一次一個

Question

我有三個p元素，我想逐漸淡入淡出。我已經嘗試了很多方法，但結果相同 - 所有3個同時淡入/淡出。不知道我錯過了什麼。我對此很新。

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"); 

    } 

Answer 1

.delay（Ñ）設置一個定時器，以延遲的功能的執行在隊列（用於單個聲明），而不是多個聲明之間。這就是爲什麼他們都在同一時間進來。

做你想做什麼，你可以改變每個段落像這樣有關的延遲時間：

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

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

以下是一個演示你想要的效果的例子，以及如何延遲的作品，爲什麼你讓你的原始結果。

http://jsfiddle.net/RvK35/1/