1

私はこのhtmlを持っています：

<div id="navbar">
  <ul>
    <li class="active"><a href="#">button1</a></li>
    <li class="inactive"><a href="#">button2</a></li>
    <li class="inactive"><a href="#">button3</a></li>
    <li class="inactive"><a href="#">button4</a></li>
    <li class="inactive"><a href="#">button5</a></li>
    <li class="inactive"><a href="#">button6</a></li>
    <li class="inactive"><a href="#">button7</a></li>
  </ul>
</div>
<div id="slider">
</div>

そして、ページが読み込まれるときに遅延を使用して、各ボタンに移動効果を実行したいと思います。jquery.slideDownを試してみましたが、期待した結果が得られませんでした。それから私は.animateで試しましたが、ボタンはそれらの間で遅滞なく一斉に動いています。

これは私が.slideDownで得たものです：http ：//www.specter.uv.ro

これは私がanimateで試したものです：www.specter.uv.ro/index2.html

var seq = $('li').show(), li = 0;
(function() {
  $(seq[li++]).animate({'margin-top':'20px'}, 300, arguments.callee);
})();

どこに遅れをとるのかわからない。

私はjQueryを初めて使用します。

助けてください！

4

2 に答える 2

2

このようなことを試してください。これがライブデモです

$(function() {
    var delay = 0;
    var duration = 2000;
    $("#navbar li").hide().each(function() {
       $(this).delay(delay).slideDown(duration);
       delay += 1000; 
    });
});

Zainのコメントが示唆しているように、ボタンごとに異なる遅延が必要ない場合は、上記の大部分を次のように置き換えることができます。

$(#navbar li").hide().delay(delay).slideDown(duration);
于 2010-11-06T14:28:45.573 に答える
1

SlideDownは、現在のアニメーションが終了したときに実行するコールバックメソッドを提供します。遅延がアニメーションと同じ長さである場合は、次のようなものを試すことができます（最初から隠されていると仮定します）。

$(function() {
  $("#navbar li:first-child").slideDown(200, slideNext);
});
function slideNext() {
  $(this).next().slideDown(500, slideNext);
}

これを試すこともできます（おそらくあなたが探しているものよりも多いです）：

$(function() {
  $("#navbar li").each(function(ind) {
    setTimeout("$($('#navbar li')[" + ind + "]).slideDown(200);", ind * 100);
  });
});

100inは、それぞれのind * 100間の遅延です。

于 2010-11-06T15:09:13.643 に答える