Question

我有函数，当用户在某些坐标上滚动页面时，使用animate.css在DOM元素上制作动画。它运作得很好。

$(window).scroll(function() {
    $('.dev-courses__item').each(function(){
        var imagePos = $(this).offset().top;
        var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow + 591) {
            function slideAnimate(name,method){
                if (method === undefined || method == 'default') {
                    method = "slideInLeft";
                }
                $(name).addClass(method);
            };
            slideAnimate('.dev-courses__item-first');
            slideAnimate('.dev-courses__item-second');
            slideAnimate('.dev-courses__item-third');
            slideAnimate('.services-list');
        };
    });
});

目标是制作功能，可以在不同的选择器等普遍使用。我试过这个：

function elemAnimate(selector,position,name,method){
    $(window).scroll(function() {
        $(selector).each(function(){
            var imagePos = $(this).offset().top;
            var topOfWindow = $(window).scrollTop();
            if (imagePos < topOfWindow + position) {
                function slideAnimate(name,method){
                    if (method === undefined || method == 'default') {
                        method = "slideInLeft";
                    }
                    $(name).addClass(method);
                };
            };
        });
    });
}
elemAnimate('.dev-courses__item', 591, '.dev-courses__item-first');

在函数slideAnimate开始工作之后，控制台中没有任何反应。所以我发现，我不能以这种方式从嵌套函数传递参数。如何正确地做到这一点？

Answer 1

我认为你的答案就在这里：

JavaScript嵌套函数

所有功能都可以访问全局范围   实际上，在JavaScript中，所有函数都可以访问范围＆＃34;以上＆＃34;它们。
  JavaScript支持嵌套函数   嵌套函数可以访问范围＆＃34;以上＆＃34;它们。
  https://www.w3schools.com/js/js_function_closures.asp

您的slideAnimate函数嵌套在嵌套在scroll函数中的每个函数中。尝试取消嵌套此功能。

function elemAnimate(selector,position,name,method){ $(window).scroll(function() { $(selector).each(function() { if ($(this).offset().top < $(window).scrollTop() + position) { slideAnimate(name,method); } }); }); } function slideAnimate(name,method){ $(name).addClass(method === undefined || method === 'default' ? 'slideInLeft' : method); }

或者，如果您只是使用它来添加课程，那么就一起摆脱它......

function elemAnimate(selector,position,name,method){ $(window).scroll(function() { $(selector).each(function() { if ($(this).offset().top < $(window).scrollTop() + position) { $(name).addClass(method === undefined || method === 'default' ? 'slideInLeft' : method); } }); }); }

另外，由于您已经在使用jQuery，您是否考虑过使用jQuery UI？它使动画变得非常容易。

https://api.jqueryui.com/slide-effect/

如何将嵌套函数参数传递给主函数参数？

1 个答案:

JavaScript嵌套函数