Question

我一直在阅读有关此问题的几个类似问题，但我无法让它发挥作用。我在jQuery中有一个滚动检测功能，我想要有3个参数：

function scroll_detection(box_selector, trigger_offset, the_animation){
     //something here
     the_animation();
}

其中the_animation是一个将被调用的函数：

scroll_detection("section", .8, function(){
     //stuff here
});

问题是，当我添加该功能时，动画不再运行。

此代码完美无缺：

function scroll_detection(duration, box_selector, element_selector, ease, trigger_offset ){
        var effect_offset = Math.floor($(window).height() * trigger_offset);
        $(window).bind('scroll', function() {
            $(box_selector).each(function() {
                var post = $(this);
                var position = post.position().top - ($(window).scrollTop() + effect_offset);               
                if (position <= 0) {
                    $(this).find(element_selector).animate( { marginLeft: "0" }, duration, ease );
                } 
            });        
        });
    }

    scroll_detection(2000, "section", ".section-title", "easeOutBack", .8);
    scroll_detection(3000, ".article-wrap", ".article-title", "easeOutBounce", .7);

但这不是：

function scroll_detection(the_animation, box_selector, trigger_offset ){
        var effect_offset = Math.floor($(window).height() * trigger_offset);
        $(window).bind('scroll', function() {
            $(box_selector).each(function() {
                var post = $(this);
                var position = post.position().top - ($(window).scrollTop() + effect_offset);               
                if (position <= 0) {
                    the_animation();
                } 
            });        
        });
    }

    scroll_detection( function(){
        $(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
    }, "section", .8);

我希望能够轻易改变我想要的效果。任何帮助将不胜感激。

编辑2015年9月9日：

正如@Aguardientico和@LuiGui指出的那样，问题是回调函数中$（this）的范围，我选择了@Aguardientico解决方案。

jQuery(document).ready(function($){

    function scroll_detection(the_animation, box_selector, trigger_offset ){
        var effect_offset = Math.floor($(window).height() * trigger_offset);
        $(window).bind('scroll', function() {
            $(box_selector).each(function() {
                var post = $(this);
                var position = post.position().top - ($(window).scrollTop() + effect_offset);               
                if (position <= 0) {
                    the_animation.call(post); //Add call to give the function the right scope
                } 
            });        
        });
    }

    scroll_detection( function(){
        $(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
    }, "section", .8);

Answer 1

它看起来像是与scope相关的问题，您在匿名函数$(this)中调用了the_animation，如果您执行以下操作会怎样？ the_animation.call(post)

function scroll_detection(the_animation, box_selector, trigger_offset ){
        var effect_offset = Math.floor($(window).height() * trigger_offset);
        $(window).bind('scroll', function() {
            $(box_selector).each(function() {
                var post = $(this);
                var position = post.position().top - ($(window).scrollTop() + effect_offset);               
                if (position <= 0) {
                    the_animation.call(post);
                } 
            });        
        });
    }

    scroll_detection( function(){
        $(this).find(".section-title").animate( { marginLeft: "0" }, 2000, "easeOutBounce");
    }, "section", .8);

Answer 2

你是函数调用不要匹配函数定义。

您的参数 OUT OF ORDER 。

试试这个新代码：

var scroll_detection = function scroll_detection_func(
  the_animation, box_selector, trigger_offset
){
  var effect_offset = Math.floor($(window).height() * trigger_offset);
  $(window).bind('scroll', function() {
    $(box_selector).each(function() {
      var post = $(this);
      var position = post.position().top
                   - ($(window).scrollTop()
                   + effect_offset)
      ;               
      if (position <= 0) {
        the_animation();
      } 
    });        
  });
}

scroll_detection( 
  function(){
    $(this).find(".section-title").animate({ 
      marginLeft: "0" }, 
      2000, "easeOutBounce"
    );
  },           //the_animation
  "section",   //box_selector 
  .8           //trigger_offset
);

Answer 3

根据您提供的代码，the_animation表示

$(this).find(element_selector).animate( { marginLeft: "0" }, duration, ease ); 所以你的函数中可以有一个this。当您使用this作为参数传递函数时，您需要指定this的含义，只需尝试指定this使用apply()的范围，{{1} }或＆＃39; call（）＆＃39;功能，这里有一些解释： http://javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/

jQuery函数作为其他jQuery函数的参数不起作用

3 个答案:

试试这个新代码：