在所有 div 中淡入淡出，每个之后一个

Posted 2023-05-08

【中文标题】在所有 div 中淡入淡出，每个之后一个

【英文标题】：fadeIn all divs, one after each

【发布时间】：2012-07-06 19:17:09

【问题描述】：

我有以下html

<div class="post">
            <span class="fr">27.03.2012 - 14:07</span>
            <div class="uzytkownik fl" ><img src="inc/img/awatar.jpg" >
                <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" >
                <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" >
                <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" >
                <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 方法。

到目前为止，我已经在 jquery 中完成了这个：

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

)();

然而不管用，结果是所有的div女巫类同时postfadeIn，而不是一个接一个。

有什么帮助吗？

提前致谢。

【参考方案1】：

Paul Irish 给出了三个很好的方法来解决这个问题，但他使用了 fadeOut 而不是 FadeIn。我已经提到了下面的链接。我敢打赌，你不会得到更好的解决方案。 http://paulirish.com/2008/sequentially-chain-your-callbacks-in-jquery-two-ways/

以下是他提到的三种方式，最好通过链接。

自执行回调链

(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'))

【讨论】：

谢谢，它对我有用。也感谢您的文章，现在阅读。