шоу IMG на позиции прокрутки

Question

Я пытаюсь добиться того же эффекта, как говорил о здесь: Show Div when scroll position Я даже используя один и тот же код, только пытаюсь исчезнуть в IMG, а не дела. Эффект работает для первого изображения (исчезает, когда он прокручивается в представлении), но все последующие изображения исчезают в одно и то же время, делая их полностью видимыми при прокрутке, а не исчезают в виде. Кто-нибудь имел эту проблему или может предположить, что я делаю неправильно?

/* Every time the window is scrolled ... */ 
$(window).scroll(function(){ 

/* Check the location of each desired element */ 
$('.hideme').each(function(i){ 

    var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
    var bottom_of_window = $(window).scrollTop() + $(window).height(); 

    /* If the object is completely visible in the window, fade it in */ 
    if(bottom_of_window > bottom_of_object){ 

     $(this).animate({'opacity':'1'},500); 

    } 

}); 

}); 

Если остальная часть моего кода необходимо, я могу включить его, но он не сильно отличается от оригинальной скрипки этого фрагмента кода от: http://jsfiddle.net/tcloninger/e5qaD/

То, что я не могу понять почему скрипка работает правильно, когда я заменяю текст изображениями, но на моем сайте нет. Это, похоже, идентичный код с двумя разными результатами.

Вот мой фактический сайт, чтобы вы могли видеть, что он делает. Текст должен исчезать по одному, а не сразу. http://trentguillory.com/testwebsite/index2.html

Answer 1

У меня нет проблем с использованием того же кода с изображениями. Я обменял теги div на следующее: <img class="hideme" src="http://placehold.it/350x150"/> See this fiddle. Можете ли вы изменить эту скрипку и дать больше информации?

Answer 2

Разница между вашим кодом и образцами JSFiddle заключается в том, что position(). Top дает вам позицию элемента относительно его родительского элемента.

Поскольку JSFiddles не инкапсулируют свой текст в DIV, их код вычисляет расстояние текста от верхней части HTML, что означает, что эффект прокрутки работает.

В вашем коде расстояние между элементом изображения от родительского элемента всегда равно 0, поэтому все они отображаются одновременно.

Вместо

$ (это) .position(). Верхняя

Использование

$ (это) .offset(). Верхняя

, который дает положение элемента сверху страницы. Это сработает.