1

I'm using a jquery plugin that triggers an event when the monitored element is in/out of the viewport (http://remysharp.com/2009/01/26/element-in-view-event-plugin/), and I can get it to work with .addClass or .removeClass, but can't get it working with .each + .fadeIn, my guess is it's a simple syntax error on my part.

Works perfectly:

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

I'd like to be able to use this with the following (tested, and working) function:

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

This was tried but doesn't work:

$("#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');
    }
}

I'm open to anything, including a totally different way of going about this; thank you.

4

1 回答 1

0

试试这种方法：

// 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/

于 2013-09-13T16:30:37.657 回答