Обратный отсчет от заданного числа с задержкой

[frost68]

Здравствуйте, необходимо, чтобы при прокрутке человеком к нужной части сайта, кол-во товаров уменьшалось, причем сначала на 2, затем через 3 секунды еще на 3, я использовал такой код

$(function() {
    var jqBar = $('#bar-1');
    var jqBarStatus = true;
    $(window).scroll(function() {
        var scrollEvent = ($(window).scrollTop() > (jqBar.position().top - $(window).height()));
        if (scrollEvent && jqBarStatus) { 
            jqBarStatus = false;
      var currentNumber = $('#dynamic-number').text();

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number').text(Math.ceil(this.numberValue)); 
    }
});
           
        }}
    });
})

как сделать, чтобы после того как отсчет дойдет до 60, через 3 секунды продолжился до 57 например?

[рони]

frost68,

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
}).delay(3000).animate({numberValue: 57}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

[frost68]

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
}).delay(3000).animate({numberValue: 57}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

Огромное спасибо, работает!

[frost68]

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
}).delay(3000).animate({numberValue: 57}, {
    duration: 8000,
    easing: 'linear',
    step: function() {
        $('#dynamic-number').text(Math.ceil(this.numberValue));
    }
});

Как сделать выполнения этого скрипта еще раз, в другом месте, я сделал так

$(function () {
    var jqBar = $('#bar-2'); // селектор для вашего блока
    var jqBarStatus = true;
    $(window).scroll(function() {
        var scrollEvent = ($(window).scrollTop() > (jqBar.position().top - $(window).height()));
        if (scrollEvent && jqBarStatus) { 
            jqBarStatus = false;
            /* выполнение скрипта jqbar с определенными параметрами */
      var currentNumber = $('#dynamic-number2').text();

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 100,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number2').text(Math.ceil(this.numberValue)); 
    }
});
           
        }
    });
});

но там с цифры 63 моментально становиться цифра 61 и ничего не происходит

[рони]

моментально

duration: 100,

???

[frost68]

затупил, поправил, но второй скрипт начинает срабатывать сразу после загрузки страницы, а не при пролистывании к этому элементу

[рони]

frost68,
анимация чисел в зоне видимости jquery

[frost68]

???

Мой код тоже вроде заработал, а как сделать, чтобы при обновлении страницы одним и тем же человеком показывались уже конечный цифры без обратного отсчета? Т.е. чтобы отсчет каждый раз не сбрасывался

[рони]

Т.е. чтобы отсчет каждый раз не сбрасывался

читать про localStorage, смотреть примеры с localStorage

[frost68]

В чем здесь ошибка? Суть в том, что если человек увидел обратный отсчет, то при перезагрузке страницы он видел только результат выполнения обратного отсчета, а если local storage пуст, то выполнялся обратный отсчет.
<div class="attention">По акции доступно <span id="dynamic-number3">63</span>!</div>

<script>
document.getElementById('dynamic-number3').onload = function() {
  if(document.getElementById('dynamic-number3')=== null) {
    localStorage.setItem('dynamic-number3', "57");
  } else {
    localStorage.setItem('dynamic-number3', "63");
  }
}
if (localStorage.getItem('dynamic-number3') == "63") {
   
            jqBarStatus = false;
            /* выполнение скрипта jqbar с определенными параметрами */
      var currentNumber = $('#dynamic-number3').text();

$({numberValue: currentNumber}).animate({numberValue: 60}, {
    duration: 5000,
    easing: 'linear',
    step: function() { 
        $('#dynamic-number2').text(Math.ceil(this.numberValue)); 
    }

})
</script>