slideUP動畫在滾動之後相互張貼？

我有一個WordPress的網站，我的崗位存在顯示如下圖所示（沒什麼特別的）slideUP動畫在滾動之後相互張貼？

<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>

我還想有動畫（一slideUpIn由velocity.js）後，相互一個帖子，爲了這個，我現在用這樣的：（我想避免這種延遲，但有一次啓動用戶到達窗口後動畫），其中啓動DIV描述後，動畫

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'); 
}) 
} 
}); });

。

我遇到的問題是它顯示所有帖子在一個，所以我添加了每個功能，你可以看到。但是通過這個函數，所有的帖子都是循環動畫，並不會停止動畫。 ..

任何人都知道我可以做到這一點？

非常感謝！

來源

2017-06-12 thebigE

據「循環」，因爲它不斷重新啓動幻燈片上的每個滾動事件，因爲沒有什麼可以運行不止一次阻止它。 .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.

來源

2017-06-12 15:08:36 Supr

slideUP動畫在滾動之後相互張貼？

回答

相關問題