Как запустить анимацию один раз?

Question

[denism300]

Пытаюсь запустить анимацию когда блок попадает во вьюпорт.
Написал такой код:

jQuery(document).ready(function ($) {
    var warranty_block = $(document).find('#warranty');
    $(window).on('scroll.progressbar', function () {
        if ($(window).scrollTop() + $(window).height() >= warranty_block.offset().top) {
            animate_progress_bar(warranty_block);
        }
    });
});

function animate_progress_bar(warranty_block) {
    var progress_bar = warranty_block.find('.progress-bar'),
        bar_value = progress_bar.attr('aria-valuenow') + '%';
    progress_bar.animate({
        width: bar_value,
    }, {
        duration: 5000,
        complete: function () {
            jQuery(window).off('scroll.progressbar');
        }
    });
}

Проблема в том, что анимация работает бесконечно, несмотря на то, что после выполнения функции анимации должен сработать метод off.
Как исправить?

Answer 1

[denism300]

Вот так работает. Нужно было вынести off из метода compete функции animate

jQuery(document).ready(function ($) {
    var warranty_block = $(document).find('#warranty');
    $(window).on('scroll.progressbar', function () {
        if ($(window).scrollTop() + $(window).height() >= warranty_block.offset().top) {
            animate_progress_bar(warranty_block);
        }
    });
});

function animate_progress_bar(warranty_block) {
    var progress_bar = warranty_block.find('.progress-bar'),
        bar_value = progress_bar.attr('aria-valuenow') + '%';
    progress_bar.animate({
        width: bar_value,
    }, 5000);
    jQuery(window).off('scroll.progressbar');
}

Answer 2

[Stalker_RED]

Сейчас вы неправильно себе представляете что делают методы on и off. Почитайте внимательно их описание в документации. Они навешивают и снимают обработчик события, а не запускают и останавливают что-то там.

Заодно присмотритесь к .one(), вероятно это решит задачу.