Question

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

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

我有浮动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

使用Jquery动画逐个显示浮动div

1 个答案: