5

指定された順序付けられていないリスト/dom要素を通過し、CSS（アニメーション）クラスを各リストアイテム/子に割り当てるjqueryを作成しようとしています。また、.addClass間の遅延時間を調整できるようにします。

私が試したすべてが惨めに失敗しました。

例えば：

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

になる：

<ul>
   <li class="animation">Item 1</li>
     (50ms delay)
   <li class="animation">Item 2</li>
     (50ms delay)
   <li class="animation">Item 3</li>
     (50ms delay)
   <li class="animation">Item 4</li>
     (50ms delay)
</ul>

何かご意見は？

4

4 に答える 4

14

これはここで機能します：

$('ul li').each(function(i){
    var t = $(this);
    setTimeout(function(){ t.addClass('animation'); }, (i+1) * 50);
});

http://jsfiddle.net/GCHSW/1/

于 2012-06-22T23:02:11.713 に答える
1

このことを考慮：

HTML：

<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

Javascript：

$("#myList li").each(function(i, li) {
    var $list = $(this).closest('ul');
    $list.queue(function() {
        $(li).addClass('animation');
        $list.dequeue();
    }).delay(50);
});

フィドルを参照してください：http：//jsfiddle.net/DZPn7/2/

これは簡潔でも効率的でもありませんが、jQueryの純粋主義者のソリューションです。

于 2012-06-23T00:06:56.817 に答える
1

アニメーションには2つの方法があります（jQueryとCSS3 Transitions +を使用.addClass）。

したがって、たとえば次のようにjQueryを試すことができます。

$('#myList li').each(function(i){
   $(this).delay(50*i).animate({opacity: 1},250);
});

CSS3トランジションの使用：

$('#myList li').not('.animation').each(function(i){
    setTimeout(function(){
       $('#myList li').eq(i).addClass('animation');
    },50*i);
});

楽しみ！

于 2014-01-04T08:28:59.790 に答える
0

<ul>上記の答えは、シナリオにうまくアプローチ<li>できますが、より冗長な状況ではうまく機能しません。これを実際にダイヤルインするには、機能を、ターゲット要素と遅延を入力として受け入れる関数にラップする必要があります。次に、関数はその要素を受け取り、... sighの遅延でタイムアウトを設定します。これはあまりにも複雑で、コーディングする必要があります。

function applyAnimation(element, delay){
 setTimeout(function(){ $(element).addClass('animation'); }, delay);
 var children = document.getElementById(id).children;
 for( var i = 0; i < children.length; i++){
  applyAnimation(children[i],(2+i) * delay);//2+i:0 fails, 1 would be parent, 2 is child
 }
}
于 2012-06-22T23:28:01.467 に答える