Jquery 每当用户使用fullpage js滚动到另一个部分时，更改颜色并设置动画

我正在我的网页上使用fullPage js插件。我已经在前两个部分添加了一个动画，当用户滚动到另一个部分时，颜色会逐渐过渡到该部分的实际颜色，反之亦然。您可以在此处看到动画：

动画仅在第一次不工作后正常工作一次。我正在使用

onLeave

调用在我离开该节时触发脚本，并使用

onLoad

在更改到第2节时第一次触发动画。我需要动画和颜色转换发生在每次我离开网站

有人能帮我吗？提前谢谢

HTML

JQuery：

(document).ready(function(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){

                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').css('background','#1f3264');
                        });
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                    else if (index == 5 || anchorLink == 'contact') {
                         $('.left').addClass('animateRightSlide');
                         $('.right-large').addClass('animateLeftSlide');
                    }
                },
                onLeave: function(index, nextIndex, direction) {
                    if (index == 1 && direction == 'down') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').css('background','#1f3264');
                        });
                    }
                    else if (index == 2 && direction == 'up') {
                        $('#section1').addClass('colors-reverse').one(animationEnd,function () {
                            $('#section1').css('background','#24ccdf');
                        });
                    }
                }
            });
});

---

过了很长一段时间，我才发现这个问题——我并没有取消这门课。因此，通过在动画完成后添加removeClass（），问题就解决了

jQuery

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        $(document).ready(function(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){

                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                    else if (index == 5 || anchorLink == 'contact') {
                         $('.left').addClass('animateRightSlide');
                         $('.right-large').addClass('animateLeftSlide');
                    }
                },
                onLeave: function(index, nextIndex, direction) {
                    if (index == 1 && direction == 'down') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                    }
                    else if (index == 2 && direction == 'up') {
                        $('#section1').addClass('colors-reverse').one(animationEnd,function () {
                            $('#section1').removeClass('colors-reverse');
                            $('#section1').css('background','#24ccdf');
                        });
                    }
                    else if (index == 3 && direction == 'up') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                    }
                }
            });
});

(document).ready(function(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){

                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').css('background','#1f3264');
                        });
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                    else if (index == 5 || anchorLink == 'contact') {
                         $('.left').addClass('animateRightSlide');
                         $('.right-large').addClass('animateLeftSlide');
                    }
                },
                onLeave: function(index, nextIndex, direction) {
                    if (index == 1 && direction == 'down') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').css('background','#1f3264');
                        });
                    }
                    else if (index == 2 && direction == 'up') {
                        $('#section1').addClass('colors-reverse').one(animationEnd,function () {
                            $('#section1').css('background','#24ccdf');
                        });
                    }
                }
            });
});

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

        $(document).ready(function(){
            $('#fullpage').fullpage({
                anchors: ['home','about','projects','blog','contact'],
                fixedElements: '#toggle,#overlay',
                afterLoad : function(anchorLink,index) {
                    if(index == 1 || anchorLink == 'home'){

                    }
                     else if(index == 2 || anchorLink == 'about'){
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                        $('#section2 h1').addClass('come-in').one(animationEnd,function(){
                            $('#section2 h3').addClass('come-in').one(animationEnd,function(){
                                $('#section2 p').addClass('come-in');
                            });
                        });
                    }
                    else if (index == 5 || anchorLink == 'contact') {
                         $('.left').addClass('animateRightSlide');
                         $('.right-large').addClass('animateLeftSlide');
                    }
                },
                onLeave: function(index, nextIndex, direction) {
                    if (index == 1 && direction == 'down') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                    }
                    else if (index == 2 && direction == 'up') {
                        $('#section1').addClass('colors-reverse').one(animationEnd,function () {
                            $('#section1').removeClass('colors-reverse');
                            $('#section1').css('background','#24ccdf');
                        });
                    }
                    else if (index == 3 && direction == 'up') {
                        $('#section2').addClass('colors').one(animationEnd,function () {
                            $('#section2').removeClass('colors');
                            $('#section2').css('background','#1f3264');
                        });
                    }
                }
            });
});