1

3 つの p 要素があり、一度に 1 つずつフェードトグルしたいと考えています。私はこれをいくつかの方法で試しましたが、同じ間違った結果になりました.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");

    }
4

1 に答える 1

0

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

于 2013-08-17T19:17:07.677 に答える