Question

这是插件，以防有人发现它有用。 http://silvestreh.github.io/onScreen/
再次感谢！

所以，我正在尝试编写我的第一个jQuery插件，我已经找到了我的第一个路障。插件应该在元素可见时执行某些操作（如在视图端口区域，而不是CSS可见性）

这就是插件的样子：

(function($) {
  $.fn.onScreen = function(options) {
    var self = $(this);

    params = $.extend({
      doIn: function(){
        console.log('on screen');
      },
      doOut: function(){
        console.log('off screen');
      },
      offset: 0
    }, options);

    return this.each(function() {
      var $el = $(this);
      var elTop = $el.offset().top;

      $(window).scroll(function() {
        var pos = $(window).scrollTop();

        if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
          params.doIn.call($el[0]);
        } else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
          if (typeof(params.doOut) == 'function') {
            params.doOut.call($el[0]);
          }
        }
      });
    });
  };
})(jQuery);

这就是我试图使用它的方式：

$(function(){
  $('div').onScreen({
    doIn: function() {
      $(this).stop().animate({
        left: 20
      },500)
    },
    doOut: function() {
      $(this).stop().animate({
        left: 0
      },500)
    }
  });
});

问题是$(this)引用了窗口对象（因为插件中的$(window).scroll()而不是匹配的元素）。我究竟做错了什么？我如何告诉我的插件我想要匹配元素呢？

提前致谢： - ）

编辑：我刚刚创建了一个JSFiddle，你可以查看它。 http://jsfiddle.net/FBEFJ/3/ 编辑2：bfavaretto修复了代码。我用工作代码更新了问题。谢谢！

Answer 1

问题是你如何在插件中调用doIn和doOut。也许最简单的解决方案是使用this强制Function.prototype.call值：

if (pos + params.offset >= (elTop - $el.height()) && pos + params.offset < (elTop + $el.height())) {
    params.doIn.call($el[0]);
} else if (pos + params.offset > (elTop + $el.height()) || pos + params.offset < elTop) {
    if (typeof(params.doOut) == 'function') {
        params.doOut.call($el[0]);
    }
}

jQuery插件：对匹配的元素做东西

1 个答案: