jquery - 一次一个地切换所有元素

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;
}

江青

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( n ) 设置一个计时器来延迟队列中函数的执行（对于单个语句），而不是在多个语句之间。这就是为什么他们都同时进来的原因。

为了做你想做的事，你可以改变与每个段落相关的延迟时间，如下所示：

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/