Question

我在用户滚动时在元素上使用Waypoints和Animate.css。它外观和工作都很棒，但是我的JS文件看起来很乱，因为我还必须使用JS添加类，因为它们不能在这个项目的标记中。我对jQuery很陌生，但我觉得必须有更好，更干的方式来完成我正在做的事情！

下面是我的脚本文件的一部分，它添加了类并与Waypoint类交互 - 由于动画的数量很多，它会变得非常长。非常感谢任何以正确方式指出我的帮助！

(function($) {
    $(function() {
        $('.section-content').css('opacity', 0).waypoint(function() {
            $('.section-content').addClass('delay animated fadeInUp');
        }, {
            offset: '100%'
        });

        $('.three-modules .module').css('opacity', 0).waypoint(function() {
            $('.three-modules .module').addClass('delay animated fadeInUp');
        }, {
            offset: '75%'
        });

        $('.section-title').css('opacity', 0).waypoint(function() {
            $('.section-title').addClass('delay animated fadeInUp');
        }, {
            offset: '75%'
        });

        $('.content-image-section').css('opacity', 0).waypoint(function() {
            $('.content-image-section').addClass('delay animated fadeInLeft');
        }, {
            offset: '75%'
        });
        $('.quiz-image-container').css('opacity', 0).waypoint(function() {
            $('.quiz-image-container').addClass('delay animated fadeInRight');
        }, {
            offset: '75%'
        });

        // …keeps going like this
    });
})(jQuery);

Answer 1

如果您只是想减少上面代码中的重复次数，您可以将重复的代码放在一个函数中，该函数包含更改位的参数，例如

function animateElementOffset(query, class, offset) {
    $(query).css('opacity', 0).waypoint(function() {
        $(query).addClass('delay animated ' + class);
    }, {
        offset: offset
    });
}

(function($) {
    $(function() {
        animateElementOffset('.section-content', 'fadeInUp', '100%');
        animateElementOffset('.three-modules .module', 'fadeInUp', '75%');
        animateElementOffset('.section-title', 'fadeInUp', '75%');
        animateElementOffset('.content-image-section', 'fadeInLeft', '75%');
        animateElementOffset('.quiz-image-container', 'fadeInRight', '75%');
    });
})(jQuery);

此外，如果您反复使用相同的元素，则集中查找与每个元素匹配的查询可能是值得的，例如

function getAnimationHandle(query) {
    var element = $(query);
    return {
        animateOffset: function (class, offset) {
            element.css('opacity', 0).waypoint(function() {
                $(query).addClass('delay animated ' + class);
            }, {
                offset: offset
            });
        }
    }
}

(function($) {
    $(function() {
        var sectionContent = getAnimationHandle('.section-content');
        var threeModulesModule = getAnimationHandle('.three-modules .module');
        var sectionTitle = getAnimationHandle('.section-title');
        var contentImageSection = getAnimationHandle('.content-image-section');
        var quizImageContainer = getAnimationHandle('.quiz-image-container');

        sectionContent.animateOffset('fadeInUp', '100%');
        threeModulesModule.animateOffset('fadeInUp', '75%');
        sectionTitle.animateOffset('fadeInUp', '75%');
        contentImageSection.animateOffset('fadeInLeft', '75%');
        quizImageContainer.animateOffset('fadeInRight', '75%');
    });
})(jQuery);

在需要动态添加类时使用Waypoint的更好方法是什么？

1 个答案: