0

私がやろうとしているのは、テキストを 1 つずつ表示することです。タグ 1、タグ 2、タグ 3 と言ってみましょう。最初にタグ 1 を表示した後、タグ 2 を表示し、タグ 3 を表示した後、... 1 つずつ表示します。 ...

私が取り組んでいるコードはこれです：

HTML:

<ul>
    <li>tag 1</li>
    <li>tag 2</li>
    <li>tag 3</li>
    <li>tag 4</li>
    <li>tag 5</li>
</ul>

Jクエリ

$(document).ready(function(){
    $('ul > li').each(function(){
        $(this).hide().delay(1000).fadeIn(1850);
        _self = $(this);
        $.ajax({
            url     : '/echo/json/',
            data    : {
                text : _self.val()
            },
            type    : 'POST',
            success : function(response) {
                _self.css('color','red');
            }
        });
    });
});

http://jsfiddle.net/FWZKF/2/

4

5 に答える 5

4

各要素の遅延を増やします。

$('ul > li').each(function(i){
        $(this).hide().delay(i*1000).fadeIn(1850);}
  //more code
);
于 2013-07-28T05:59:55.713 に答える
1

次のように、アニメーション コールバックを使用して次の要素に移動できます。

http://jsfiddle.net/xuKH3/

    iterator( $('ul > li').hide().first() );
    function iterator( el ) {
        el.fadeIn(1850, function() { iterator( el.next() ); } )
    }
于 2013-07-28T06:16:38.573 に答える
0

もう 1 つの方法ですが、Dr.Molle ほどではありません。

http://jsfiddle.net/FWZKF/8/

$(document).ready(function(){
    $('li').hide();
    var shown = $('ul > li:first');
    shown.hide().delay(1000).fadeIn(1850);
    setInterval(function(){
        if(shown.next().length){
            shown = shown.next();
             shown.hide().delay(1000).fadeIn(1850);
        }
    },2000);
});
于 2013-07-28T06:09:33.633 に答える