jQuery 函數作為其他 jQuery 函數的參數不起作用

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 月 11 日編輯：

正如@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() 、 bind()或 'call()' 函數的范圍，這里有一些解釋： http: //javascriptissexy.com/javascript-apply-call-and-bind-methods-are-essential-for-javascript-professionals/