javascript - 用Jquery动画让 float 的div一一出现

Question

我正在使用 tutorial 的代码动画div，

jQuery(document).ready(function() {
    jQuery('.post').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeIn',
        offset: 100
       });
});

我有 float div，我怎样才能让它一个一个地动画而不是逐行地动画？

我尝试将下面的代码与之前的代码结合使用，但我不知道如何让它工作

.each(function(index){
    var _this = this;
    setTimeout( function(){ $(_this).fadeIn('slow'); }, 1000*index );
});

这是我的 Html

<div class="post">
    <span class="icon fa fa-camera-retro"> </span>
    <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, .</p>
</div>

<div class="post">
    <span class="icon fa fa-camera-retro"> </span>
    <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, .</p>
</div>

<div class="post">
    <span class="icon fa fa-camera-retro"> </span>
    <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
    <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, .</p>
</div>

CSS 代码

.post{
        float:left;
        padding:10px;
        height:420px;
        width:440px;
        border:1px solid #ccc;
    }

Answer 1

试试这个

  $('.post').each(function(i,e){
    $(this).show(3000);
  });

https://plnkr.co/edit/pqPeitx3yhHM8ktS3ysa