Запуск события jquery, когда элемент появляется на экране

Я хочу показать эффект затухания, как только элемент появится на экране. Существует много контента перед этим элементом, поэтому, если я запускаю efect на document.ready, при определенных разрешениях vistors его не видят.

Возможно ли инициировать событие, когда после прокрутки элемент становится видимым? Я почти уверен, что раньше видел этот эффект, но понятия не имею, как его достичь.

Спасибо!

Ответы

Ответ 1

Плагин jQuery Waypoints может быть полезен. Он обеспечивает способ запуска действия, когда элемент становится видимым на экране.

Например:

$('.entry').waypoint(function() {
   alert('The element has appeared on the screen.');
});

Ниже приведены примеры сайта плагина.

Ответ 2

Это лучше для меня, чем других в этом посте: http://www.teamdf.com/web/jquery-element-onscreen-visibility/194/

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

$('#element').visible()

Вы можете увидеть, как этот плагин используется для создания вашего эффекта здесь:

http://css-tricks.com/slide-in-as-you-scroll-down-boxes/

function viewable() {
    $(".module").each(function(i, el) {
        var el = $(el);
        if (el.visible(true)) {
            el.addClass("come-in");
        });
    }
$(window).scroll(function() {
    viewable();
});
$(window).blur(function() {
    viewable();
});

Если вы используете вкладки. (например, вкладки jQuery UI), вы должны проверить, активна ли табло.

$(window).scroll(function() {
    if($('#tab-1').hasClass('active')) {
        viewable();
    }
});

Ответ 4

Быстрый поиск показал это viewport расширение для jQuery, которое позволит вам проверить видимость элемента в окне просмотра. Если ваш элемент не находится в окне просмотра, не делайте анимацию с постепенным увеличением.

Ответ 5

Я думаю, вы имеете в виду плагин jQuery "Lazy Load": http://www.appelsiini.net/2007/9/lazy-load-images-jquery-plugin

От взгляда на исходный код, похоже, что плагин делает что-то вроде этого:

$('#item').one('appear', function () {
    // Do stuff here
});