Запуск функций, когда селектор загрузчика карусели выбрал класс - PullRequest
Новая
       9

Запуск функций, когда селектор загрузчика карусели выбрал класс

0 голосов
/ 24 апреля 2018

Следующие функции показывают счетные числа.Это внутри загрузочной карусели.

Я хочу запустить эту функцию, когда селектор загрузочной карусели имеет class="selected" и не сразу при загрузке страницы.

И 2-е условие должно заключаться в том, что пользователь действительнонаходится на этой части страницы (#video).Таким образом, функция не запускается, когда он не видит часть, относящуюся к функции (может быть, как-то через scrollspy?).Как я могу это сделать? 

$('.count').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: 4000,
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});

Вопрос по этой странице (последний слайд): https://bm -translations.de / km # video

enter image description here

1 Ответ

0 голосов
/ 30 апреля 2018

Первое состояние:
Проверьте, есть ли у Каруселя Класс 

if $('#yourcaroussellID').hasClass('selected')

Второе состояние
Сравните положение пользователей на странице с положением элементов на странице 

isInViewport = function() {
    var videoTop = $('#carouselMarketing1').offset().top;
    var videoBottom = videoTop + $('#carouselMarketing1').outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = viewportTop + $(window).height();

    return videoBottom > viewportTop && videoTop < viewportBottom;
}

Вам нужно будет проверить объединенные ifs с интервалом, чтобы увидеть изменения в прокрутке: 

myInterval = setInterval(function(){ 
    if ($('#carousel-selector-4').hasClass('selected') && (isInViewport())) { 
        yourCounter();
        myStopFunction();
    }
}, 1000);

Сделайте ваш счетчик функцией, которую вы можете вызвать: 

yourCounter = function() {
    $('.count').each(function () {
        $(this).prop('Counter',0).animate({
            Counter: $(this).text()
        }, {
            duration: 4000,
            easing: 'swing',
            step: function (now) {
                $(this).text(Math.ceil(now));
            }
        });
    });
}

Сделать функцию останова для интервала: 

function myStopFunction() {
    clearInterval(myInterval );
}
...