2

私は、JavaScript効果を呼び出してLIに適用するforループの作成に取り組んでおり、順番に実行しています。これが私が持っているものです：

$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show();
    }
});

ただし、これは機能しません。LI#1 にエフェクトを適用し、次に LI#2、LI#3 などに適用する必要があります。

私がやろうとしているのは、ページの下部にある [もっと見る] ボタンをクリックしたときに Twitter が行うことと似ています。

編集: LI を UL 要素に追加するので、DIV で LI をラップすることはできません。

ただし、サイズが変更されたときに UL をアニメーション化する方法があれば、それで十分です。

4

4 に答える 4

1

それぞれを同じ速度で表示したいが、それぞれの間にわずかな遅延がある場合は、setTimeout を使用する必要がある場合があります...たとえば...

$(document).ready(function () {        
    var showListItem = function(index) {
        $("li#"+index).show("slow")
    };
    for(i=1;i<=10;i++) {
        setTimeout(function() { showListItem(i); }, (i * 100))
    }
});

少しばかげているように見えるかもしれませんが、私の記憶が正しければ、インデックス (i) を何らかのエンクロージャーでラップしない限り、実行されるメソッドは常に i の値を 10 として認識します。

于 2009-06-20T04:15:28.483 に答える
1 
$(document).ready(function () {
    for(i=1;i<=10;i++) {
        $("li#"+i).show("slow");
    }
});

show( speed, [callback] )を見てください。ドキュメントから：

適切なアニメーションを使用して一致したすべての要素を表示し、完了後にオプションのコールバックを起動します。

一致した各要素の高さ、幅、および不透明度は、指定された速度に従って動的に変更されます。

また、要素を非表示にしたり表示したりする他の方法もあります。たとえば、 fadeInやfadeOutなどです。http://docs.jquery.com/Effectsをご覧ください。

静的データを使用して、あなたが求めているものの簡単なモックアップを作成しました。

var $lis = $('<li>blha blhahah lajlkdj</li><li>blha blhahah lsdfsajlkdj</li>').hide();
$('ul').append($lis);
$lis.show("slow");

そしてそれは機能するので、次のようなことを行うことができ、要素 ID を反復処理するという頭痛の種を気にする必要がないことが考えられます。

$.load('/items/?p=2',function(data) {
    var $lis = $(data).hide();
    $('ul').append($lis);
    $lis.show("slow");
});

明確にするために、上記の$.loadへの呼び出しは、サイトの/items/?p=2の出力が一連の LI であると想定しています。

于 2009-06-20T03:37:56.780 に答える
0

また、Ajax を介して新しいアイテムをロードする別のイベントでこれをトリガーする場合 ([その他] ボタンをクリックした後など)、ロジックをjQuery 1.3 で使用可能な.live()でラップする必要があることを確認してください。

jQuery 1.2 を使用している場合は、代わりにlivequeryを使用できます。

于 2009-06-20T03:41:13.047 に答える
0

次のようなリストがある場合、これでうまくいくはずです。

<ul id='menu' style='display: none;'>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
<li>item 5</li>
<li>item 6</li>
<li>item 7</li>
</ul>

次に、次のようにリスト項目を順番に表示するコードを記述できます。

$('#menu').show().find('li').hide().bind('show', function() {
  $(this).show('slow', function() {
    $(this).next('li').trigger('show');
  });
}).filter(':first').trigger('show');

コードは次のことを行っています: menu の<ul>検索、表示、すべての検索と非表示、要素をゆっくりと表示<li>するカスタム イベントをバインドし、完全に表示されると、その隣に何かがあるかどうかを確認してトリガーします。その要素の同じイベント。次に、最初の 1 つだけをすべてフィルター処理し、このカスタム イベントをトリガーして、基本的にドミノ効果を開始します。show<li><li>

これが実際の動作例です。より速くしたい場合は、「遅い」を「速い」または時間に変更できます。

于 2009-06-20T04:55:24.163 に答える