Анимированное увеличение чисел на 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));
     }
    });
});

});