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);
    }
});

DEMO： http://jsfiddle.net/p7jDg/2/

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

viewport中的jquery元素+每个函数

1 个答案: