Использование плагина waypoints для отображения элементов один за другим

Question

Я пытаюсь отобразить 3 элемента (тест 1, тест 2, тест 3) один за другим после того, как эти элементы станут видимыми в веб-браузере/окне просмотра. Я использую следующий код, который я нашел в Интернете. Fadein работает, но начинается сразу, когда страница загружается, а не запускается пользователем, прокручивая вниз, когда она достигает «путевой точки». Может быть, это связано с кодом смещения, который я не понимаю? Что он делает в этом случае? Большое спасибо

<script type="text/javascript"> 
$(document).ready(function() { 
$('.test1').waypoint(function(event, direction) { 
    $(this).fadeIn(1500); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

$('.test2').waypoint(function(event, direction) { 
    $(this).fadeIn(2000); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 

$('.test3').waypoint(function(event, direction) { 
    $(this).fadeIn(2500); 
}, { 
    offset: function() { 
     return -$(this).height(); 
    } 
}); 
}); 
</script> 

Answer 1

Элементы с display:none не живут в том же самом месте на документе, как они делают, когда они видимы. Это своего рода точка display:none. Скрипты, пытающиеся прочитать положение этих элементов, таких как путевые точки, обычно возвращают 0, как если бы они располагались в верхней части страницы, поэтому они немедленно срабатывают.

Лучший способ решить эту проблему - прекратить использование display:none + fadeIn и переключиться на анимирующую непрозрачность. Пример ниже.

Кроме того, Waypoints версии 2.0+ избавился от параметра события, поэтому я также удалил его здесь. Я также изменил ваше смещение. -$(this).height() будет вызывать fadeIn, когда элемент полностью покинет верхнюю часть окна просмотра.

$('.test1, .test2, .test3').css('opacity', 0); 

$('.test1').waypoint(function(direction) { 
    $(this).animate({ opacity: 1 }, 1500); 
}, { 
    offset: 'bottom-in-view' 
}); 

// etc