1

我有一个使用全屏幻灯片的单页网站（由fullPage.js提供支持）。

我让这个脚本在页面第一次加载时为一些文本设置动画（第一页是带有动画的页面）我对 JS 相当陌生，所以我想知道如何让它在每次用户导航到幻灯片时执行动画?

JS： 

    $(document).ready(function() {
        $.fn.fullpage({
            slidesColor: ['#161616', '#161616'],
            anchors: ['', 'Bye']});

        $(".test").each(function(i) {
            $(this).delay(i*600).animate({ opacity: 1 }, 700)
        });         
    });
</script>

它只是动画三个spans。当我导航回幻灯片时，我希望它再次为它们设置动画。另外，当导航到另一张幻灯片时，如何设置opacity= 0？（以便可以重新设置动画

HTML：

<div class="section active" id="section0">
<h1>?</h1>
<h2><span class="test">1.</span> <span class="test">2.</span> <span class="test">3.</span></h2>
<a  onclick="javascript:window.location='#CV';"><img class="downArrow" src="images/arrow.svg"/></a>

CSS对于.test：

   .test{
       opacity: 0;
   }
4

1 回答 1

1

所以这就是我的做法。请注意，我曾经fadeOut()更改opacity，这是因为更改css opacity不稳定 有时它不会更改所有元素。

<script type="text/javascript">

    $(document).ready(function() {

        $.fn.fullpage({
            anchors: ['1', '2'],

            afterRender: function(){
            //For the initial animation, aferLoad does not work.
                $(".test").each(function(i){
                    $(this).delay(i*600).animate({ opacity: 1 }, 900);
                });
            },

            afterLoad: function( anchorLink, index, slideAnchor, slideIndex){
            //When the first slide is navigated to perform animation.
                if(anchorLink == '1'){
                    $(".test").each(function(i){
                        $(this).delay(i*600).animate({ opacity: 1 }, 900);
                    });
                }
            },

            onLeave: function(index, direction){
            //When navigated away from first slide reset the opacity.
                if(index == '1' && direction == 'down'){
                    $(".test").fadeTo(400,0);
                }
            }
        });
    });
</script>
于 2014-02-08T11:18:06.677 回答