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

[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]

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]

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 (https://javascript.ru/forum/misc/60390-animaciya-chisel-pri-prokrutke-stranicy-2.html#post439702)

[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>