视口中的jquery元素+每个函数

Question

我正在使用一个 jquery 插件，当被监控的元素进入/离开视口 (http://remysharp.com/2009/01/26/element-in-view-event-plugin/) 时会触发一个事件，我可以让它与 .addClass 或 .removeClass 一起使用，但不能它与 .each + .fadeIn 一起使用，我猜这是我的一个简单的语法错误。

完美运行：

$('#foo .inAndOut').bind('inview', monitor);
function monitor(event, visible)
    {
    if(visible)
    {
      $(this).removeClass('stop').addClass('start');
    }
    else
    {
      $(this).removeClass('start').addClass('stop');
    }
}

我希望能够将它与以下（经过测试和工作的）功能一起使用：

   $("#DIV1, #DIV2, #DIV3").each(function(i) {
         $(this).delay(8000).delay(i*1500).fadeIn();
   });

这个方法试过了，还是不行：

$("#DIV1, #DIV2, #DIV3").bind('inview', monitor);
function monitor(event, visible)
    {
    if(visible)
    {
      $("#DIV1, #DIV2, #DIV3").each(function(i) {
          $(this).delay(8000).delay(i*1500).fadeIn();
      });
    }
    else
    {
      alert('out');
    }
}

我对任何事情都持开放态度，包括完全不同的处理方式；谢谢。

Answer 1

试试这个方法：

// Cache elements we're actioning on
var elems = $('#foo, #bar');

// Give them a custom attribute (I've chosen attr() here, but you could use data())
elems.each(function (i) {
    $(this).attr('data-inview-index', i);
});

// Now bind the inview stuff
elems.bind('inview', function (event, visible) {
    // And we can access the custom attribute for use here.
    var i = $(this).attr('data-inview-index');

    if (visible) {
        $(this).text(i);
    }
});

演示： http://jsfiddle.net/p7jDg/2/

使用.data()：http://jsfiddle.net/p7jDg/3/