элемент jquery в области просмотра + каждая функция

Я использую подключаемый модуль 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');
    }
}

Я открыт ко всему, включая совершенно другой способ сделать это; благодарю вас.


jquery each
person user2777052    schedule 13.09.2013    source источник
comment
вы получаете какую-либо ошибку на консоли?   -  person Tushar Gupta - curioustushar    schedule 13.09.2013
comment
Ошибок консоли нет. Страница загружается нормально, но ничего, связанное с этим кодом, ничего не делает.   -  person user2777052    schedule 13.09.2013
comment
Просто совет: вы можете позвонить delay один раз с помощью 8000 + (i * 1500)   -  person Itay    schedule 13.09.2013
comment
Я буду использовать этот наконечник задержки; Спасибо.   -  person user2777052    schedule 13.09.2013
comment
Кроме того, нам будет легче помочь вам решить проблемы, если вы предоставите нам [jsfiddle.net], показывающий ваш соответствующий код.   -  person Itay    schedule 13.09.2013
comment
Я никогда не видел событие "inview", я погуглю.   -  person Oliboy50    schedule 13.09.2013
comment
В любом случае, кажется, хороший плагин :)   -  person Oliboy50    schedule 13.09.2013
comment
@gvee Это индекс каждого метода.   -  person Oliboy50    schedule 13.09.2013
comment
Хорошо, я сделал jsfiddle с базовой рабочей функцией .each: jsfiddle.net/2K3MB/9 . Тем временем я освежу в памяти свойство :visible, но, насколько я помню, я не думаю, что это «в окне просмотра», а скорее «отображение: нет» по сравнению с «отображение: блок», которое не будет служить моему потребности.   -  person user2777052    schedule 13.09.2013

Ответы (1)


arrow_upward
0
arrow_downward

Вместо этого попробуйте этот подход:

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

person gvee    schedule 13.09.2013
comment
Иисус. Это немного выше моего понимания, но я попытаюсь заставить это работать со скрипкой, которую я опубликовал; спасибо, меня всегда поражала человеческая готовность помочь. - person user2777052; 13.09.2013
comment
Хорошо, у меня есть ваш код, работающий в jsfiddle, но .each + .slideDown срабатывает независимо от того, находится ли он в области просмотра или нет. Мне нужно, чтобы он срабатывал только в поле зрения и прекращал срабатывать, когда его уводят из поля зрения. Текущая работа: jsfiddle.net/yVrC6/20 - person user2777052; 13.09.2013
comment
Хорошо, я очень, очень близок к тому, чтобы заставить это работать; см.: jsfiddle.net/yVrC6/58. Я просто не использую, как приостановить/возобновить .each + .slideDown, когда вещь покидает представление (время паузы), а затем снова входит в представление (возобновление с того места, где вы остановились). - person user2777052; 13.09.2013
comment
jsfiddle.net/yVrC6/145 Я изменил ваше условие else на inviewSlider.stop().fadeOut();. Это гарантирует, что очередь будет очищена сразу для всех элементов. - person gvee; 14.09.2013