0

私は次のhtmlを持っています

<div class="post">
            <span class="fr">27.03.2012 - 14:07</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" alt="awatar">
                <h3>Michał Lach</h3>
                <h4>Moderator</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>
            <div class="clear"></div>
        </div>
        <!--koniec posta -->    
        <div class="post">
            <span class="fr">27.03.2012 - 18:52</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar2.jpg" alt="awatar">
                <h3>Jan Kowalski</h3>
                <h4>Użytkownik</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>
            <div class="clear"></div>
        </div>
        <!--koniec posta -->    
        <div class="post">
            <span class="fr">28.03.2012 - 4:53</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" alt="awatar">
                <h3>Michał Lach</h3>
                <h4>Moderator</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>
            <div class="clear"></div>
        </div>
        <!--koniec posta -->    

        <div class="post">
            <span class="fr">29.03.2012 - 16:28</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar2.jpg" alt="awatar">
                <h3>Michał Lach</h3>
                <h4>Moderator</h4>
        </div>
        <!--koniec uzytkownik -->   
            <div class="wiadomosc fr"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  
        </p>
        </div>

私の考えは、ビューからすべてのdivを非表示にしてから、すべてのdivをfadeInすることですが、fadeInメソッドを開始したいのは、前のdivでfadeInメソッドが終了した後でのみです。

これまでのところ、jqueryでこれを終了しました：

(function() {
  var post =  $('.post').hide();
  post.each(function(){
        $(this).fadeIn('slow');
        console.log('ok');
    });

})();

ただし、機能しません。その結果、すべてのdivウィッチクラスがフェードインを同時に投稿します。次々と投稿することはありません。

何か助けはありますか？

前もって感謝します。

4

1 に答える 1

2

Paul Irishは、これに3つの優れた方法を提供しましたが、FadeInではなくfadeOutを使用しました。以下のリンクについて説明しました。あなたは私が賭けるより良い解決策を得ることができないでしょう。http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

以下は彼が言及した3つの方法であり、リンクをたどるのが最善です。

自己実行型コールバックチェーン

(function showVehicle(elem){
  elem.fadeIn('slow',function(){
    $(this).next().length && showVehicle($(this).next()); 
  });
})( $("div.vehicle:first") );

カスタムイベントトリガー

$('div.vehicle')
  .bind('showVehicle',function(e) {$(this).fadeIn('slow',function(){ 
    $(this).next().length && $(this).next().trigger("showVehicle"); 
  })})
  .eq(0)
    .trigger('showVehicle');

任意のjQueryオブジェクトでの自己実行型コールバックチェーン

(function hidenext(jq){
    jq.eq(0).fadeOut("fast", function(){
        (jq=jq.slice(1)).length && hidenext(jq);
    });
})($('div#bodyContent a'))
于 2012-07-06T10:27:36.690 に答える