当需要动态添加类时，使用 Waypoints 的更好方法？

Question

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

下面是我的脚本文件的一部分，它添加了 classes 并与 Waypoint class 交互——由于动画的数量，它变得非常长。任何帮助我指出正确方法的人都将不胜感激！

(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);

当需要动态添加类时，使用 Waypoints 的更好方法？

Better way to use Waypoints when classes need to be added dynamically?

jquery

jquery-waypoints

当需要动态添加 类 时，使用 Waypoints 的更好方法？

Better way to use Waypoints when classes need to be added dynamically?

jquery

jquery-waypoints

当需要动态添加类时，使用 Waypoints 的更好方法？