fullpagejs,怎么控制slide动画,希望当是第i个slide时,该屏开始动画

行走的指尖
浏览 4946回答 1
1回答

最爱枫林晚

.animated {    opacity: 0;    animation: fade-in 3s ease-out 0s 1;    -webkit-animation: fade-in 3s ease-out 0s 1;    -moz-animation: fade-in 3s ease-out 0s 1;    -o-animation: fade-in 3s ease-out 0s 1;    -ms-animation:fade-in 3s ease-out 0s 1;    /*规定动画的最后状态为结束状态*/    animation-fill-mode:forwards;    -webkit-animation-fill-mode: forwards;    -o-animation-fill-mode: forwards;    -ms-animation-fill-mode: forwards;    -moz-animation-fill-mode: forwards;}$.fn.fullpage({        scrollOverflow:true,//当为true时如果页面数据太多可以下滑出现,页脚使用      anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8'],      resize:true,      navigation: true,        navigationTooltips: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6', 'page7', 'page8'],        // 滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算        // onLeave 滚动前的回调函数,接收 index、nextIndex 和 direction 3个参数:        //index 是离开的“页面”的序号,从1开始计算;        afterLoad: function(anchorLink, index){            //section 2            if(index==2){//                第一张图片显示                $("#animated-01").removeClass("animated");                $("#animated-01").addClass("animated");                $(".icc").removeClass("icc-hover");                $(".icon-01").removeClass("icc-01-ami");                $(".icon-01").addClass("icc-01-ami");                $(".icon-02").removeClass("icc-02-ami");                $(".icon-02").addClass("icc-02-ami");                $(".icon-03").removeClass("icc-03-ami");                $(".icon-03").addClass("icc-03-ami");                $(".icc").removeClass("icc-action");                $(".lamp-icon >ul >li").removeClass("hover-bgn");                $(".icc").eq(0).addClass("icc-action");            }            if(index==3){                $("#lamp-03-1").css("display","block");                $('#section3')                        .mousewheel(function(event, delta) {                            event.preventDefault();                            if (delta > 0){                                if ($( "#lamp-03-1" ).css("display")=="none") {                                    $( "#lamp-03-1" ).css("display","block");                                    $( "#lamp-03-2" ).css("display","none");                                    return false;                                }else{                                    $('#section3').unmousewheel();                                }                            }                            else if (delta < 0){                                if ($( "#lamp-03-1" ).css("display")=="block") {                                    $( "#lamp-03-1" ).css("display","none");                                    $( "#lamp-03-2" ).css("display","block");                                    return false;                                }else{                                    $('#section3').unmousewheel();                                }                            }                        });                $(".lamp-03").removeClass("icc-01-ami");                $(".lamp-03-text").removeClass("icc-02-ami");                $(".lamp-03").addClass("icc-01-ami");                $(".lamp-03-text").addClass("icc-02-ami");            }
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery