Question

我发现这篇文章是一个教程，用于动画滚动元素的动画：Tutorial for animated scroll loading effects with Animate.css and jQuery | web2feel.com

它的效果很好，在文章示例中，当您在滚动时到达它们时，会显示带有类的div：“post”。

我想更改此js以使得如果同时显示2个div，则脚本会一个接一个地动画（不是同时进行两个动画）。显示2个div的js下方同时显示。我需要暂停他们。

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

Answer 1

我想我很想为两个div制作两个不同的类。 .post和.postafter。假设我们有一些像这样的HTML ......

<style>
    .post, .postafter{
        display: inline-block;
        width: 49%;
    }
</style>

<section>
    <div class="post"> Text or images here ... </div>
    <div class="postafter"> More along side ... </div>
</section>
<section>
    ... repeated down the page ...
</section>

然后你可以做这样的事情jsFiddle，其中两个不同的div加载不同的滚动偏移。

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

jQuery('.postafter').addClass("hidden").viewportChecker({
    classToAdd: 'visible animated fadeIn',
    offset: 200
});

或者你可以做更像这样的事情jsFiddle，它们在相同的偏移处加载，但是在第二次延迟之后加入一个类的CSS规则......

.postafter {
    -webkit-animation-delay: 0.5s;
    ... other vendor specific rules ...
}

Answer 2

我相信这可以通过使用setTimeout javascript函数来实现，如下所示。

 jQuery(document).ready(function () {
 timer = 0;
     jQuery('.post'), each(function () { //deal with each post instead of all in one go.
        setTimeout(function () {
             $(this).addClass("hidden").viewportChecker({
                 classToAdd: 'visible animated fadeIn',
                 offset: 100
             });
         }, timer);
         timer = 1000; // this will delay second execution by 1 sec.
     });
 });

未经测试但如果您只有两个类post的元素，则应该可以使用。

Answer 3

我只是阅读了你的问题，但没有去你的教程来源，所以只使用你提供的详细信息，这里是你如何得到你想要的结果：

jQuery(document).ready(function() {
    // ...

    // my guess is that viewportChecker(...) does the actual animation,
    // so it should be called later for each post.
    var posts = jQuery('.post').addClass("hidden");

    // now call viewportChecker(...) on each post, sequentially...
    jQuery.each(posts, function(post, index){
        post.viewportChecker({
            classToAdd: 'visible animated fadeIn',
            offset: 100
        });
    });
});

如果动画中的重叠帧太长，那么您可以在超时后的第一个之后对后续索引进行排队。

祝你好运。

动画脚本的修改？

3 个答案: