Некое число (к примеру 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 }) |