I need to "animate" a variable with jquery.
Example: The variable value is 1. The value should be 10 after 5 seconds. It should be increase "smoothly".
Hope that you know what I mean.
Thank you!
jQuery can be several times slower than CSS when talking about animations. CSS animations and transitions have the advantage of being hardware accelerated by the GPU, which is really good in moving pixels.
The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback);
Step Function It accepts two arguments ( now and fx ), and this is set to the DOM element being animated. fx : a reference to the jQuery.
Easing functions specify the speed at which an animation progresses at different points within the animation.
try:
$({someValue: 0}).animate({someValue: 10}, {
duration: 5000,
step: function() {
$('#el').text(Math.ceil(this.someValue));
}
});
<div id="el"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With