Понедельник, 13.05.2024, 05:02
Меню сайта
Категории раздела
JQuery плагины [59]
JQuery уроки [69]
PHP полезное [24]
PHP уроки [21]
Css [26]
JS [3]
SQL [9]
Css 3 [17]
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная » Статьи » JQuery плагины

jQuery пример Анимированные цифры

jQuery пример Анимированные цифры

Сентябрь 17, 2012 | Автор admin рубрика: jQuery примеры и сниппеты

Некое число (к примеру 100) начинает уменьшаться до (к примеру 50) при нажатии на кнопку
И всё это видно в виде анимации.

HTML:

1
2
3
4
5
6
7
8
9
<form method="post" action="#">
 <fieldset>
 <span id="number">100</span>
 <button> 25</button>
 <button>-20</button>
 <button> 375</button>
 <button>-210</button>
 </fieldset>
</form>​

Javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var number = $('#number');
 
$('button','form').on('click', function(){
 
 var prevVal = parseInt(number.text()),
 newVal = parseInt($(this).text())
 
 /* start a dummy animation */
 number.animate({'z-index':number.css('z-index')},{
 /* declare a "step" function that will get executed at each step */
 step: function(now,fx){
 number.text( prevVal Math.floor( newVal*fx.pos ) )
 }
 })
 
 return false
})
Категория: JQuery плагины | Добавил: ChronoW (25.11.2012)
Просмотров: 1101 | Теги: jQuery пример | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email *:
Код *: