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（ 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/

fade一次切换一个元素

1 个答案: