1

我正在尝试在视口中为内容设置动画。但问题是，jquery（用于检查内容是否在视口中）不起作用，因为我也在使用 pagepiling.js（http://alvarotrigo.com/pagePiling/）。我不知道确切的原因，但我认为这可能是由于使用 pagepiling.js 的不同页面的位置造成了问题。有什么解决方案吗？（基本上，我想要这样的东西）

<link rel="stylesheet" type="text/css" href="animate.css" />  <!-- animate.css css3 library   -->
<script src="viewportchecker.js"></script>      <!-- viewportchecker plugin   -->
<script type="text/javascript" src="jquery.pagepiling.min.js"></script>

<style>
.hidden{
     opacity:0;
}
.visible{
     opacity:1;
}
</style>

<script>
var deleteLog = false;
$(document).ready(function() {
$('#pagepiling').pagepiling({
menu: '#menu',
anchors: ['page1', 'page2', 'page3'],
sectionsColor: ['#bfda00', '#693575', '#2C3E50', '#51bec4'],
easing: 'linear'
});
});

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

<div id="pagepiling">
    <div class="section" id="section1">
    <div class="intro">
         <div class="post"> <!-- Post content goes here --> </div>
    </div>
    </div>

    <div class="section" id="section2">
    <div class="intro">
        <div class="post"> <!-- Post content goes here --> </div>
    </div>
    </div>

</div>
4

1 回答 1

1

如果您阅读pagePiling.js 文档，您会发现它为您提供了回调，例如afterLoad，onLeave...

只需像文档中详细说明的那样使用它们：

$('#pagepiling').pagepiling({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(anchorLink, index){
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }

        //using anchorLink
        if(anchorLink == 'secondPage'){
            alert("Section 2 ended loading");
        }
    }
});
于 2016-01-21T10:24:47.270 回答