Анимированное увеличение чисел на jQuery + CSS

Анимированное увеличение чисел на jQuery + CSS

Эффект анимированной прокрутки увеличения чисел от нуля до заданного значения, используется довольно часто. Как правило данный эффект применяют для вывода какой-либо ценной информации, на которую пользователь должен обратить внимание. Используя функцию анимации мы создаем удобства просмотра, увеличиваем период нахождения посетителей на сайте. За плавность увеличения чисел и показ отвечает jQuery. Оформление анимированных счетчиков представлено в стилях CSS.

Решение состоит из следующих 3-х файлов. Кроме того, необходимо подключить jquery.

<ul>
<li>Сообщений<span class="count">37</span></li>
<li>Необработанных заявок<span class="count">16</span></li>
</ul>

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');

html{
height: 100%;
}

body{
font-family: 'Roboto', sans-serif;
font-size: 14px;
background: #FF5722;
}


ul {
list-style-type:none;
width: 280px;
margin: 20px auto;
padding: 0;
}

ul li {
position: relative;
display: block;
background: #fff;
color: #333;
border-top: 1px solid #dbdcd2;
padding: 18px;
text-transform: uppercase;
}

ul li span:before {
content: "+";
}

ul li span {
font-size: 12px;
float: right;
background: #FF5722;
color: #fff;
padding: 3px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
}

li.header {
background: #878e9c;
color: #fff;
}

$(document).ready(function () {

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

});