我有以下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方法完成前一个div之后才启动fadeIn方法。
到目前为止，我已经在jquery中完成了这个：
(function() {
var post = $('.post').hide();
post.each(function(){
$(this).fadeIn('slow');
console.log('ok');
});
})();
然而它不起作用，结果是所有的div女巫类同时发布fondIn，而不是一个接一个。
任何帮助？
提前致谢。
答案 0 :(得分：2)
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'))