导航到：JavaScript时在幻灯片中重新设置动画

我有一个一页的网站，它使用全屏幻灯片（由驱动）

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

JS

：

CSS

用于

。测试

：

   .test{
       opacity: 0;
   }

---

我就是这样做的。请注意，我使用了

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>

$（文档）.ready（函数（）{
$.fn.fullpage({
锚定：['1'，'2']，
afterRender:function（）{
//对于初始动画，重载不起作用。
$（“.test”）。每个（函数（i）{
$（this）.delay（i*600）.animate（{opacity:1}，900）；
});
},
后加载：功能（锚点链接、索引、幻灯片索引、幻灯片索引）{
//导航第一张幻灯片以执行动画时。
如果（anchorLink='1'）{
$（“.test”）。每个（函数（i）{
$（this）.delay（i*600）.animate（{opacity:1}，900）；
});
}
},
onLeave：函数（索引、方向）{
//当导航离开第一张幻灯片时，重置不透明度。
如果（索引='1'&方向='down'）{
$（“.test”）.fadeTo（400,0）；
}
}
});
});

你能设置一个www.jsfiddle.net吗？我不知道如何将其他JS插件添加到其中？我会晚一点去看看，凌晨3点在这里需要睡觉！好的，听起来不错。您可以在JSFIDLE仪表板左侧的

External Resources

部分中放置一个指向该插件的链接。插件

afterSlideLoad

和

afterSlideLeave

提供了您所需的一切。Ross您能给我一个我将使用的代码示例吗？

   .test{
       opacity: 0;
   }

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