Безлимитный хостинг на сверхбыстрых SSD-дисках от 57р в месяц   •   Реклама
19 810 просм
47 комм
Поделиться:

Простая анимация увеличения/уменьшения чисел на jQuery

Видел множество лейдингов, зайдя на которые, видишь информационный блок, например, число клиентов. Начинаешь спускаться – и скучное число «0» вскоре превращается в тысячи тысяч.

Даже не столько привлекает внимание число, сколько его эффектное появление. О том, как сделать такую анимацию, я сейчас расскажу. Существуют различные библиотеки для создания подобного эффекта, я же покажу, как это можно сделать гораздо проще.

Предположим, что у нас есть блок с ценой:

<div class="price">0</div> 

Что нам нужно сделать? Анимацию увеличения числа от 0 до, например, 1000. Скрипт будет выглядеть следующим образом:

<script>

	$(function() {
	
		$({numberValue: 0}).animate({numberValue: 1000}, {
		
			duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд
			easing: "linear",
			
			step: function(val) {
			
				$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
				
			}
			
		});
		
	});
	
</script>

По желанию, начальное число можно не задавать, а получать из блока. Тогда реализация будет следующая:

<script>

	$(function() {
	
		var numb_start = $(".price").text(); // Получаем начальное число
		
		$({numberValue: numb_start}).animate({numberValue: 1000}, {
		
			duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд 
			easing: "linear",
			
			step: function(val) {
			
				$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
				
			}
			
		});
		
	});
	
</script>

Соответственно, переменная «numb_start» хранит в себе число из блока.

Автоматическая анимация увеличения/уменьшения чисел на jQuery

А если блок с числами находиться в самом низу? И при заходе на сайт пользователь просто не увидит вашей анимации? Решение есть! Нам просто нужно определить, виден ли блок на экране, и если да – запустить анимацию.

Реализация:

<script> 
	
	$(function() {
	
		var target_block = $(".price"); // Ищем блок 
		var blockStatus = true;
		
		$(window).scroll(function() {
		
			var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));
			
			if(scrollEvent && blockStatus) {
			
				blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.
				
				$({numberValue: 0}).animate({numberValue: 1000}, {
				
					duration: 500, // Продолжительность анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
					easing: "linear",
					
					step: function(val) {
					
						$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
						
					}
					
				});
				
			}
			
		});
		
	});
	
</script>

Обратите внимание, что если начальное число больше конечного, то во всех случаях автоматически будет происходить анимация уменьшения.

47
комментариев
Форма комментирования этой статьи скрыта. Авторизуйтесь, чтобы расширить привилегии гостевого посещения и получить необходимую помощь от сообщества Pandoge.
    • 0
    1
      •  Пользователь
    17 янв в 14:34

    Артем, добрый день! Спасибо за вашу статью. Не могли бы вы объяснить пару моментов?

    В этом примере, не понятно, что именно делает функция Math.ceil в данном контексте? И Как jQuery воспринимает объект в своем селекторе $({numberValue: 0})? Как это работает? Заранее благодарен!

    <script> 
    	
    	$(function() {
    	
    		var target_block = $(".price"); // Ищем блок 
    		var blockStatus = true;
    		
    		$(window).scroll(function() {
    		
    			var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));
    			
    			if(scrollEvent && blockStatus) {
    			
    				blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.
    				
    				$({numberValue: 0}).animate({numberValue: 1000}, {
    				
    					duration: 500, // Продолжительность анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд 
    					easing: "linear",
    					
    					step: function(val) {
    					
    						$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
    						
    					}
    					
    				});
    				
    			}
    			
    		});
    		
    	});
    	
    </script>
      • 0
      784
        •  Администратор
      17 янв в 19:42

      Дмитрий Иванов, Здравствуйте!

      Math.ceil округляет числа. Если Вы уберете ее, поставите стартовое значение 0, а конечное - 1, то результат будет следующим:

      0
      0.038
      0.092
      0.124
      0.154
      0.184
      0.216
      0.246
      0.278
      0.308
      0.34
      0.374
      0.406
      0.438
      0.494
      0.524
      0.554
      0.586
      0.62
      0.648
      0.68
      0.71
      0.748
      0.786
      0.816
      0.848
      0.882
      0.914
      0.952
      0.984
      1

      По части $({numberValue: 0}) - это (если не ошибаюсь) деструктурирующее присваивание. Можно заменить на:

      $(this).prop("numberValue", 0)

      или на:

      var numberValue = 0;
      
      $({numberValue})
    • 0
    784
      •  Администратор
    21 окт в 21:46

    Владимир Ершов, Если он находится рядом с теми же блоками - то да.

    • 0
    8
      •  Проверенный
    21 окт в 19:28

    УРАААААА !!!! ЗАРАБООООТААЛААААА !!! Артём Вы супер !!! Огромное спасибо, я так понимаю, если заказчик захочет добавить блок, то нуна добавить по строчке в "использование" ?

    • 0
    784
      •  Администратор
    21 окт в 19:18

    Владимир Ершов, с учетом Вашей верстки, вызов будет такой:

    $(document).ready(function() {
    
    	animate_number(".s5_row .s5_box:nth-of-type(1) .cifra", ".s5_row .s5_box:nth-of-type(1) .cifra_finish", 5000);
    	animate_number(".s5_row .s5_box:nth-of-type(2) .cifra", ".s5_row .s5_box:nth-of-type(2) .cifra_finish", 5000);
    	animate_number(".s5_row .s5_box:nth-of-type(3) .cifra", ".s5_row .s5_box:nth-of-type(3) .cifra_finish", 5000);
    	animate_number(".s5_row .s5_box:nth-of-type(4) .cifra", ".s5_row .s5_box:nth-of-type(4) .cifra_finish", 5000);
    
    }); 
    
    $(window).scroll(function() {
    
    	animate_number(".s5_row .s5_box:nth-of-type(1) .cifra", ".s5_row .s5_box:nth-of-type(1) .cifra_finish", 5000);
    	animate_number(".s5_row .s5_box:nth-of-type(2) .cifra", ".s5_row .s5_box:nth-of-type(2) .cifra_finish", 5000);
    	animate_number(".s5_row .s5_box:nth-of-type(3) .cifra", ".s5_row .s5_box:nth-of-type(3) .cifra_finish", 5000);
    	animate_number(".s5_row .s5_box:nth-of-type(4) .cifra", ".s5_row .s5_box:nth-of-type(4) .cifra_finish", 5000);
    	  
    });

    И Вы с ошибкой вставили функцию (смотрите консоль).

    • 0
    8
      •  Проверенный
    21 окт в 17:25

    разобрался как код нормально отправить, извиняюсь за прошлые разы ...

    <script>
    	
    	function animate_number(result_block, get_number, duration_number) {
    			
    		if(($(window).scrollTop() > ($(result_block).position().top - $(window).height())) && ($(get_number).text() !== $(result_block).text()) && ($(result_block).text() === 0 || $(result_block).text() === "")) {
    
    			$({numberValue: 0}).animate({numberValue: $(get_number).text()}, {
    
    				duration: duration_number,
    				easing: "linear",
    
    				step: function(val) {
    
    					$(result_block).html(Math.ceil(val));
    
    				}
    
    			});
    
    		}
    		
    	}
    	$(document).ready(function() {
    
    		animate_number(".cifra", ".cifra_finish", 5000);
    		animate_number(".cifra_1", ".cifra_finish", 5000);
    
    	}); 
    
    	$(window).scroll(function() {
    	  
    		animate_number(".cifra", ".cifra_finish", 5000);
    		animate_number(".cifra_1", ".cifra_finish", 5000);
    	  
    	});
    	
    </script>
    • 0
    8
      •  Проверенный
    21 окт в 17:10

    результат тот же, сама анимация работает, там в данный момент 4 блока через f_loop, в них 4 значения, 50-60-70-80, результат берётся из класса cifra_finish у которого display: none; выводится всё в класс cifra, скрипт работает до первого значения 50, дальше останавливается со значением 50607080 во всех блоках.

    Может я что то не так делаю ? вставил всё в FOOTER

    http://cafe-corretto.ershovincorp.ru/

    <script>

    function animate_number(result_block, get_number, duration_number) {

    if(($(window).scrollTop() > ($(result_block).position().top - $(window).height())) && ($(get_number).text() !== $(result_block).text()) && ($(result_block).text() === 0 || $(result_block).text() === "")) {

    $({numberValue: 0}).animate({numberValue: $(get_number).text()}, {

    duration: duration_number,

    easing: "linear",

    step: function(val) {

    $(result_block).html(Math.ceil(val));

    }

    });

    }

    }

    $(document).ready(function() {

    animate_number(".cifra", ".cifra_finish", 5000);

    animate_number(".cifra_1", ".cifra_finish", 5000);

    });

    $(window).scroll(function() {

    animate_number(".cifra", ".cifra_finish", 5000);

    animate_number(".cifra_1", ".cifra_finish", 5000);

    });

    </script>

    • 0
    784
      •  Администратор
    21 окт в 15:37

    Владимир Ершов, я вижу такой вариант решения.

    Функция:

    function animate_number(result_block, get_number, duration_number) {
    		
    	if(($(window).scrollTop() > ($(result_block).position().top - $(window).height())) && ($(get_number).text() !== $(result_block).text()) && ($(result_block).text() === 0 || $(result_block).text() === "")) {
    
    		$({numberValue: 0}).animate({numberValue: $(get_number).text()}, {
    
    			duration: duration_number,
    			easing: "linear",
    
    			step: function(val) {
    
    				$(result_block).html(Math.ceil(val));
    
    			}
    
    		});
    
    	}
    	
    }

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

    $(document).ready(function() {
    
    	animate_number(".result", ".fin", 5000);
    	animate_number(".result_1", ".fin", 5000);
    
    }); 
    
    $(window).scroll(function() {
      
    	animate_number(".result", ".fin", 5000);
    	animate_number(".result_1", ".fin", 5000);
      
    });

    Где .result - куда выводим результат, .fin - откуда берем финальное значение, 5000 - скорость анимации.

    • 0
    8
      •  Проверенный
    21 окт в 08:07

    Артем Мáлков, "Чтобы 1 скрипт можно было использовать на нескольких разных элементах?" Да, ищу решение чтобы можно было использовать скрипт в "повторителе" элементов на WP c плагином ACF через метку f_loop. Иначе блок будет не гибкий, ограниченный, а элементов может быть много, сколько нужно заказчику, проблема в том что копируемые элементы наследуют класс первого элемента, НО "начальное число" у всех разное, оно настраиваемое в каждом копируемом элементе, но класс элемента наследуется у первого. И вот не знаю, можно ли решить данную задачу в принципе или я зря мучаюсь.

    • 0
    784
      •  Администратор
    20 окт в 23:51

    Егор, здравствуйте. Вопрос не по теме статьи. Почитайте про FancyBox. Возможно он решит Вашу задачу.

    Владимир Ершов, не совсем понял про это: есть ли какое решение с повторителем что бы значения работали корректно согласно своего поля.

    Чтобы 1 скрипт можно было использовать на нескольких разных элементах?

    • 0
    8
      •  Проверенный
    20 окт в 20:04

    Всё, разобрался, но работает вот так http://cafe-corretto.ershovincorp.ru соответственно вопрос: есть ли какое решение с повторителем что бы значения работали корректно согласно своего поля ?

    вот такой скрипт использую:

    <script>

    $(function() {

    var target_block = $(".cifra"); // Ищем блок

    var blockStatus = true;

    var numb_finish = $(".cifra_finish").text(); // Получаем конечное число

    $(window).scroll(function() {

    var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));

    if(scrollEvent && blockStatus) {

    blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.

    $({numberValue: 0}).animate({numberValue: numb_finish}, {

    duration: 5000, // Продолжительность анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".cifra").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию

    }

    });

    }

    });

    });

    </script>

    • 0
    8
      •  Пользователь
    20 окт в 19:02

    Добрый вечер! Можете мне помочь мучаюсь уже целый день с самой ночи такая проблема: Хочу сделать что при нажатии на кадры фильма в новости. Кадр увеличивался и можно было щёлкать!

    Как можно это реализовать? Пытался через код - <a href="{xfimagelarge-1}" rel="highslide" class="highslide"><img src="{poster src='{xfimagelarge-1}' width='187' height='143'}" alt='{title}' title='{title}' /></a>

    - Не работает! Может и работает, но у меня выдаёт "Загрузка" бесконечная кадра.

    Ссылка тут я со скриншотами описал: https://clck.ru/JaiD7

    Готов даже вам доступ открыть дать: логин и пароль! (Очень важно для меня функция. Но не могу сделать)

    • 0
    8
      •  Проверенный
    20 окт в 18:56

    Дело в том, что я пытаюсь применить эту анимацию на WP c плагином ACF через метку f_loop, т.е. есть некий блок с повторяющимися элементами, и вот там нужно вывести эти цифры из поля f_text. И работать они должны ни сразу, а при скроле страницы в нужном месте.

    • 0
    8
      •  Проверенный
    20 окт в 18:44

    Посмотрите пожалуйста, я правильно соединил со скролом, потому что не работает что то ...

    <script>

    $(function() {

    var numb_finish = $(".price_finish").text(); // Получаем конечное число

    $(window).scroll(function() {

    var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));

    if(scrollEvent && blockStatus) {

    blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.

    $({numberValue: 0}).animate({numberValue: numb_finish}, {

    duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию

    }

    });

    }

    });

    });

    </script>

    • 0
    784
      •  Администратор
    20 окт в 18:20

    Владимир Ершов, Здравствуйте. Не в последнем, а в предпоследнем.

    Попробуйте так:

    <script>
    
    	$(function() {
    	
    		var numb_finish = $(".price_finish").text(); // Получаем конечное число
    		
    		$({numberValue: 0}).animate({numberValue: numb_finish}, {
    		
    			duration: 500, // Продолжительность анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд 
    			easing: "linear",
    			
    			step: function(val) {
    			
    				$(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию
    				
    			}
    			
    		});
    		
    	});
    	
    </script>

    .price_finish - класс откуда брать конечное число.

    • 0
    8
      •  Проверенный
    20 окт в 16:07

    Здравствуйте, у Вас в последнем скрипте есть возможность ставить НАЧАЛЬНУЮ цифру с блока с которой начинается отсчет, а ка сделать что бы начало было по умолчанию с 0, а вот КОНЕЧНАЯ бралсь из блока ?

    <script>

    $(function() {

    var target_block = $(".price"); // Ищем блок

    var blockStatus = true;

    $(window).scroll(function() {

    var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));

    if(scrollEvent && blockStatus) {

    blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.

    $({numberValue: 0}).animate({numberValue: 1000}, {

    duration: 500, // Продолжительность анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию

    }

    });

    }

    });

    });

    </script>

    • 0
    784
      •  Администратор
    18 июл в 14:51

    Игорь Герасименуо, здравствуйте.

    Для каждого блока свой скрипт.

    • 0
    1
      •  Пользователь
    18 июл в 13:17

    Здравствуете,у меня такой вопрос если в блоках разные числа то надо разные классы прописывать для получения ихнего числа?

    • 0
    784
      •  Администратор
    8 мая в 02:01

    Артур, здравствуйте.

    Используйте функцию:

    function numb_anim(start, finish, dur, el) {
    
    	$({numberValue: start}).animate({numberValue: finish}, {
    		
    		duration: dur,
    		easing: "linear",
    			
    		step: function(val) {
    			
    			$(el).html(Math.ceil(val));
    				
    		}
    			
    	});
    
    }

    Пример вызова:

    numb_anim(0, 1000, 500, ".price");

    0 - стартовое значение.

    1000 - конечное.

    500 - Продолжительность анимации.

    ".price" - элемент, где показываем результат.

    • 0
    1
      •  Пользователь
    8 мая в 01:16

    Здравствуйте. Спасибо за скрипт. Как проще нескольким цифрам добавить эту функцию. Можно пример пожалуйста. Разным классам разные значения

    • 0
    784
      •  Администратор
    29 дек в 02:18

    Павел Клевцов, не совсем понял. Поясните.

    • 0
    1
      •  Пользователь
    29 дек в 01:20

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

    • 0
    679
      •  Гости
    13 окт в 21:29

    и почему то не работает "родная" анимация чисел на сайте, хотя её код вообще не трогал

    • 0
    679
      •  Гости
    13 окт в 21:18

    да самое интересное, что скрипт работал, но цифры крутились сразу без скрола, потом удалил - поставил и вообще не заводится

    • 0
    784
      •  Администратор
    13 окт в 20:45

    Олег, если вкратце - удалите снизу сайта файл script.js и всего скорее скрипт анимации заработает. Если действительно заработает - то исправляйте ошибки в этом файле, для того чтобы использовать его и скрипт анимации чисел.

    • 0
    679
      •  Гости
    13 окт в 20:21

    так он после и стоит

    может есть более оперативный способ общения?)

    • 0
    784
      •  Администратор
    13 окт в 20:18

    Олег, нельзя ставить скрипт выше блока. Поставьте после него.

    • 0
    679
      •  Гости
    13 окт в 18:52

    не помогло((

    • 0
    784
      •  Администратор
    13 окт в 18:35

    Олег, у вас там ошибка в скрипте (не в моем, а в файле script.js). Поставьте скрипт из статьи вверх файла, или же вынесите его на страницу и проблемы должны решиться.

    • 0
    679
      •  Гости
    13 окт в 17:13

    сейчас уже чет вообще не крутятся

    • 0
    784
      •  Администратор
    13 окт в 14:27

    Олег, покажите сайт где используется скрипт.

    • 0
    679
      •  Гости
    13 окт в 14:12

    Анимация срабатывает сразу после загрузки страницы, а не при отображении блоки с числом на экране. в чем может быть причина?

    $(function () {

    var target_block = $(".price"); // Ищем блок

    var blockStatus = true;

    $(window).scroll(function() {

    var scrollEvent = ($(window).scrollTop() > (target_block.position().top - $(window).height()));

    if(scrollEvent && blockStatus) {

    blockStatus = false; // Запрещаем повторное выполнение функции до следующей перезагрузки страницы.

    $({numberValue: 0}).animate({numberValue: 1000}, {

    duration: 500, // Скорость анимации, где 500 - 0.5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".price").html(Math.ceil(val)); // Блок, где необходимо сделать анимацию

    }

    });

    }

    });

    });

    • 0
    784
      •  Администратор
    27 июл в 02:08

    Айбек, попробуйте так:

    <script>

    $(function () {

    var counter = 0;

    $('#test').click(function() {

    counter++;

    if(counter == 1) {

    $({numberValue: 0}).animate({numberValue: 1}, {

    duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".price").html((Math.round(val * 100) / 100 )); // Блок, где необходимо сделать анимацию

    }

    });

    }

    if(counter == 2) {

    $({numberValue: 1}).animate({numberValue: 1.89}, {

    duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".price").html((Math.round(val * 100) / 100 )); // Блок, где необходимо сделать анимацию

    }

    });

    }

    });

    });

    </script>

    .price - куда выводим результат

    #test - ссылка для запуска

    • 3
    679
      •  Гости
    24 июл в 15:05

    пожалуйста помогите, как сделать чтоб, при нажатии на кнопку началось анимация, к примеру с 0 до 1, потом еще раз нажал и получилось с 1 до 1.89, и все это без перезагрузки страницы.

    Буду ооооооооочень благодарен!

    Спасибо...

    • 0
    679
      •  Гости
    13 июл в 09:58

    Уважаемый Артем!

    Ваша редакция скрипта работает!!

    Просто надо было поместить скрипт ПОСЛЕ ТАБЛИЦЫ!!!!

    С уважением Фридрих

    • 0
    679
      •  Гости
    13 июл в 07:27

    Уважаемый Артем! Спасибо за быстрый ответ.

    Этот предложенный Вами скрипт почему-то у меня не работает, Анимации нет, показывает 0

    var currentNumber = $('.number').text();

    var last = $("table tr:last-child th:first-child").text();

    $({numberValue: currentNumber}).animate({numberValue: last }, {

    duration: 10000,

    easing: 'linear',

    step: function() {

    $('.number').text(Math.ceil(this.numberValue));

    }

    });

    А раньше все было великолепно!

    С уважением Фридрих

    • 0
    784
      •  Администратор
    13 июл в 00:03

    Фридрих, да.

    var last = $("table tr:last-child th:first-child").text();

    $({numberValue: 0}).animate({numberValue: last}, {

    • 1
    679
      •  Гости
    12 июл в 18:46

    Возможно ли вместо того, чтобы вставлять вручную число 1000 (конец анимации) автоматически вставлять это число из ячейки таблицы ("table tr:last-child th:first-child")

    • 0
    784
      •  Администратор
    30 июн в 23:39

    Влад, то есть остановить? Она останавливается когда число доходит до конечного указанного.

    • 0
    679
      •  Гости
    26 июн в 19:00

    Здравствуйте, подскажите как остановить анимацию?

    • 0
    784
      •  Администратор
    2 июн в 13:06

    Фридрих, Если Вы внимательно читали статью, то могли заметить в нем параграф начинающийся со слов "Обратите внимание", который и дает ответ на ваш вопрос. smiley

    • 2
    679
      •  Гости
    2 июн в 12:43

    а как сделать не увеличение а уменьшение price , например, с 50 до 5, что надо изменить в скрипте

    • 2
    679
      •  Гости
    25 апр в 17:09

    Все гениальное, просто:) Спасибо!

    • 1
    679
      •  Гости
    22 апр в 16:18

    Спасибо за всевозможные варианты полезного скрипта (с технической стороны) ) Интересный с точки зрения механики, но пользователями может восприниматься как то что сайт желает вас обчистить и доверие сразу в 0 )

    А то в тему вспоминается такой магазинчик с похожими накрутками лейдингов. Смотришь в верхнем углу - такой такой купил товар через пару секунд опять. Залезаешь в код а там... вереница покупателей прописана в коде и просто выводятся в отведенное время на сайте. Как такому сайту не доверить свой кошелек ))

    • 8
    784
      •  Администратор
    27 янв в 03:05

    Марат, надеюсь этот способ вам поможет.

    Весь скрипт используете такой:

    <script>

    $(function () {

    $({numberValue: 0.00001}).animate({numberValue: 0.1}, {

    duration: 500, // Скорость анимации, где 500 = 0,5 одной секунды, то есть 500 миллисекунд

    easing: "linear",

    step: function(val) {

    $(".price").html(val.toFixed(5).substr(2)); // Блок, где необходимо сделать анимацию

    }

    });

    });

    </script>

    • 0
    679
      •  Гости
    27 янв в 01:38

    Отличный короткий скриптик, только не могу переделать его под себя :-( У меня число с ведущими нулями. Т. е., мне надо, чтобы циферки бежали так:

    00001

    00002

    00003

    .....

    00010

    .........

    00100

    .........

    09999

    10000

    • 6
    784
      •  Администратор
    11 ноя в 02:58

    Виктор, Здравствуйте!

    Прошу прощение за поздний ответ.

    Из логики работы скрипта я вижу следующее. Если у вас уменьшение скидки находится на одной странице с формой - то тут все очень просто:

    1. Вы запускаете скрипт после первой загрузки страницы и на куках запоминаете, что у этого пользователя уже уменьшается скидка и ее значение (это нужно для того, чтобы у него не сбрасывался счетчик после перезагрузки страницы).

    2. Задаете нужную вам скидку и конечное число 0, и сюда же плюсом вы задаете скорость изменения чисел (чтобы он видел что скидка меняется и успел заполнить форму).

    3. Как только пользователь нажал кнопку "отправить" - вы считываете значение числа скидки на момент отправки формы и вместе со всеми данными отсылаете их на почту.

    Вроде все.

    Про куки можете почитать тут - https://www.pandoge.com/moduli_i_skripty/podrobnaya-instrukciya-po-rabote-s-kuki-cookie-na-jquery-php

    Про запуск скрипта после загрузки страницы тут - https://www.pandoge.com/stati_i_sovety/vypolnenie-skripta-posle-zagruzki-stranicy-na-jquery

    • 0
    679
      •  Гости
    7 ноя в 15:33

    Здравствуйте! Хочу реализовать уменьшение скидки до того пока человек не отправит форму. И чтобы сама скидка тоже отправлялась на почту. Подскажите как это можно сделать?

Подняться наверх
«Pandoge» - помощник вебмастера