淡入所有div各一个

我有下面的HTML后淡入所有div各一个

<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方法之后。

到目前为止，我已经在jQuery的这个成品：

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

})();

但是它不工作，其结果是，所有的div女巫类岗位淡入的同时，没有此起彼伏。

任何帮助？

在此先感谢。

来源

2012-07-06 Michał Lach

保罗爱尔兰已经给出了三种优秀的方式来做到这一点，但他使用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"));

自定义事件的任意jQuery对象

(function hidenext(jq){ 
    jq.eq(0).fadeOut("fast", function(){ 
     (jq=jq.slice(1)).length && hidenext(jq); 
    }); 
})($('div#bodyContent a'))

来源

2012-07-06 10:27:36

谢谢，这为我工作在触发

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

自执行回调链。也感谢一篇文章，现在阅读它。 – 2012-07-06 10:41:31

淡入所有div各一个

回答

相关问题