0

こんにちは、毎回異なる ID タグを使用してループしたい関数があります。この関数は、ナビゲーション リンクがクリックされたときに呼び出されます。これまでのところ、私はこれを持っており、txt1 を txt2 に変更し、次に txt 3、さらに txt5 に変更して、各アニメーションを次々に再生したいと考えています。ありがとう！

function animetxt(){
$o=$("#txt1");
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}
4

3 に答える 3

0

より効果的な方法は、IDを取得するために番号をループするのではなく、クラス名で要素を取得することです...

HTML：

<span id="txt1" class="txt-el"></span>
<span id="txt2" class="txt-el"></span>
<span id="txt3" class="txt-el"></span>

Javascript

function animetxt() {
    $('span.txt-el').each(function(index, element) {
        /*
            index: the index of the current item in the results given by $('span.txt-el')
            element: the DOM element
        */

        $o = $(element); // you can use $(this) too

        // magic stuff here
    });
}
于 2012-12-17T14:26:34.760 に答える
0 
function animetxt($el){    
    if(!$el)
        $o=$("#txt1");
    else {
        $o = $el.next();
        if($o.length == 0)
           return; //stop if no more items
    }
    $o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
    $o.css('display','inline-block');
    $('span',$o).stop().css({position:'relative',
                            display:'inline-block',
                            opacity:0,
                            fontSize:84,
                            top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                            left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                            }).animate({opacity:1,fontSize:20,top:0,left:0},1000, function(el) { animetxt($(this)); });

上記のようなことができます。function(el) { animetxt($(this)); }の完全なハンドラですjQuery.animate。アニメーションが完了すると呼び出されます。アニメーション化する必要がある次の要素を見つけるだけで済みます。私の例では、、などが兄弟であると.next()仮定して使用しています。すべての要素がアニメーション化されている場合は、アニメーションを停止します。HTML の構造によっては、次の要素を取得する別の方法を見つける必要がある場合があります。txt1txt2txt3

于 2012-12-17T14:46:16.007 に答える
0

すべての Id を含む配列を作成し、次を使用してそれらを反復処理します$.each。

$.each(['txt1', 'txt2' ], function(index, value) { 
  animetxt(value);  
});

(ID を入力するか、任意のセレクターを使用できることに注意してください)

function animetxt(id){
$o=$("#" + id);
$o.html($o.text().replace(/([\S])/g,'<span>$1</span>'));
$o.css('display','inline-block');
$('span',$o).stop().css({position:'relative',
                         display:'inline-block',
                         opacity:0,
                         fontSize:84,
                         top:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);},
                         left:function(i){return Math.floor(Math.random()*500)*((i%2)?1:-1);}
                        }).animate({opacity:1,fontSize:20,top:0,left:0},1000);}

注: for ループを使用して、インデックスを ID に連結することもできます。

編集：関数を順番に呼び出す

@FANgel が指摘したように、上記のコードは一度にすべて実行されます。順次実行するには、以下の関数を使用します。

この新しい関数は、 のcompleteコールバックを使用して、animationそれ自体を呼び出します。次の ID が見つからない場合は停止します。

次のように始めます。

 $(function() {
      animetxt(1);
    });

関数は次のとおりです。

function animetxt(id) {
    $o = $('#txt' + id);
    if (!$o.length) return;

    $o.html($o.text().replace(/([\S])/g, '<span>$1</span>'));
    $o.css('display', 'inline-block');
    $('span', $o).stop().css({
        position: 'relative',
        display: 'inline-block',
        opacity: 0,
        fontSize: 84,
        top: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        },
        left: function(i) {
            return Math.floor(Math.random() * 500) * ((i % 2) ? 1 : -1);
        }
    }).animate({
        opacity: 1,
        fontSize: 20,
        top: 0,
        left: 0
    }, {
        complete: function() {
            id++;
            animetxt(id);
        }
    }, 1000);
}​

それを試してみてください：

http://jsfiddle.net/ureyes84/ndScp/

于 2012-12-17T14:28:03.150 に答える