Question

我有一个wordpress网站，我的帖子显示如下（没什么特别的）

<section id="grid">
<div class="container-fluid">
      <?php $custom_query = new WP_Query('cat=-9'); // exclude category 9
while($custom_query->have_posts()) : $custom_query->the_post(); ?>

    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>" class="post" tabindex="-1" data-easein="slideUpIn" >
<div class="row">
<div class="col-md-6">
    <?php the_post_thumbnail(); ?></div>
    <div class="col-md-1"></div>
    <div class="col-md-5"><h1><a href="<?php the_permalink(); ?>">
    <?php the_title(); ?></a></h1>
        <?php the_excerpt(); ?></div>
    </div>
    </div>

<?php endwhile; ?>
<?php wp_reset_postdata(); // reset the query ?>
</div>
</section>

我喜欢让动画（一个由velocity.js创建的slideUpIn）一个帖子一个接一个，为此我正在使用它:(我想避免延迟这个，但让动画开始一次用户到达窗口上的帖子）

 jQuery(function ($) { 

$(window).scroll(function () {
console.log($(window).scrollTop());
var topDivHeight = $("#description").height();
var viewPortSize = $(window).height();

var triggerAt = 500;
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt;

if ($(window).scrollTop() >= triggerHeight) {
        // alert("Your book is overdue.");

    // $('.post').css('visibility', 'visible').hide().fadeIn();
    $(".post").each(function(i){
     $(this).delay(i).velocity("transition.slideUpIn", 2000)
    $(this).off('scroll');
})
}
}); });

在div描述之后开始制作动画。

我遇到的问题是它将所有帖子显示在一个中，所以我添加了每个功能，你可以看到。但是使用此功能，所有帖子都会循环动画，并且不会停止动画制作。 ..

任何人都知道如何实现这一目标？

非常感谢！

Answer 1

它正在“循环”，因为它会在每个滚动事件上不断重新启动幻灯片，因为没有什么可以阻止它多次运行。 .off没有任何效果，因为滚动事件未在this项目上注册，而是在window上注册。

此外，scrollTop()仅与固定高度进行比较，而不是每个帖子的顶部。 scrollTop测试需要在each内。

这样的事情：

$(window).scroll(function () {
    console.log($(window).scrollTop());

    var viewPortSize = $(window).height();

    $(".post").each(function(i){
        if ($(window).scrollTop() + viewPortSize >= $(this).offset().top && !$(this).attr('showing')) {
            $(this).attr('showing', true)
            $(this).delay(i).velocity("transition.slideUpIn", 2000);
        }
    });
});

此处在元素开始显示时会在元素上设置'showing'属性，并且如果已设置showing，则会阻止再次触发幻灯片动画。

您可能希望根据用例将触发器高度添加到$(window).scrollTop() >= $(this).offset().top测试中。

Here's a demo.

在滚动后互相发布的slideUP动画？

1 个答案: