I am trying to animate a number so that it rolls into the number when the page loads. I am using another library to display a dial (http://anthonyterrien.com/knob/). The issue I am having is that the number seems to be different every time I run it. It should be a consistent number ending on 19420. However sometimes it is lower and there doesn't seem to be any particular pattern.
My JS code looks like this:
$(function() {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
step: function() {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
The fiddle can be found here: http://jsfiddle.net/ND5Sf/
What have I done wrong or is there anything I've missed out? If not, are these 2 libraries not compatible?
The issue is because you are using step function instead of progress.
Step:
A function to be called for each animated property of each animated
element. This function provides an opportunity to modify the Tween
object to change the value of the property before it is set.
Progress:
A function to be called after each step of the animation, only once
per animated element regardless of the number of animated properties.
(version added: 1.8)
Code:
$(function () {
$('#dial').knob({
min: '0',
max: '25000',
readOnly: true
});
$({
value: 0
}).animate({
value: 19420
}, {
duration: 950,
easing: 'swing',
progress: function () {
$('#dial').val(Math.round(this.value)).trigger('change');
}
});
});
Docs: http://api.jquery.com/animate/
Demo: http://jsfiddle.net/IrvinDominin/JW2gP/
Related
I have recently implemented the counter shown in this jsfiddle: https://jsfiddle.net/Behseini/osqzL4ob/
HTML
<div id="users">Counter: <b counter="0">0</b></div>
JS
function update_users_count() {
$('#users b').animate({
counter: 260
}, {
duration: 6000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
},
complete: update_users_count
});
};
update_users_count();
In the element inspector it looks as if the script would continue to loop after execution (the value is highlighted and keeps refreshing). Is there a way to stop this from happening?
Sure, just remove the complete: update_users_count (what it does is: recursively looping the same function on "complete", although the value stays the same in its final state count).
jsFiddle demo
I have built a web-app in which the HTML code receives an integer value from python. I want to add a counting from 0 to that number animation.
I have checked many such queries on StackOverflow like this link.
Today morning the animation was working fine, but now it's not working.
$('.count').each(function ()
{
$(this).prop('Counter',0).animate
({
Counter: $(this).text()
},
{
duration: 10000,
easing: 'swing',
step: function (now)
{
$(this).text(Math.ceil(now));
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>
Maybe I am missing some library or something, idk
Can anyone help me with this issue?
Reviewing your code:
Since the there is no logic to dictate how the counter should change, i've added a countTo variable before the animation.
Since you reference { Counter: $(this).text() } as the properties object within the animate function, the $(this).text() begins as {{ confirmed }} which is not a parsable number, hence NaN.
The solution below should resolve this.
$('.count').each(function () {
let el = $(this);
let countTo = 1000;
el.prop('counter',0).animate({
counter: `+=${countTo}`
}, {
step: function (now) {
$(this).text(Math.ceil(now))
},
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 class="font-weight-bold" style="color:#f92424"><span class="count">{{ confirmedIn }}</span></h4>
There is a problem with that animation I found here :
jQuery animated number counter from zero to value
Here is the problem, I used it on test website and the counter don't go on the exact value when it's with big numbers.
here's the HTML :
<span class="Count">66620</span>
<br/>
<span class="Count">66666666</span>
<br/>
<span class="Count">66666666</span>
here's the javascript :
$('.Count').each(function () {
var $this = $(this);
jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
duration: 1000,
easing: 'swing',
step: function () {
$this.text(Math.ceil(this.Counter));
}
});
});
http://jsfiddle.net/Yy6r6/68/
Do someone have an idea ?
Thanks in advance.
Why not simply use the first argument of the callback?
step
Type: Function( Number now, Tween tween )
step: function (i) {
$this.text(Math.ceil(i));
}
http://jsfiddle.net/Yy6r6/70/
I have a jquery function that will animate the progress bar I have from 0 to 100 when it is on the screen. The problem is, if it is not visible (not visible on the page) on page load, it will never be triggered.
My code
<script>
$(function() {
$('.dial').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: true
});
$(".dial:in-viewport").parent().show(0, function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('.dial').val(Math.round(this.value)).trigger('change');
}
});
});
});
</script>
My question is how do I make it so that function will constantly check to see if it is on the screen until it returns valid.
The easiest way would be to create an interval which executes the code every n milliseconds.
var interval = 400;
var timer = window.setInterval(function(){
// your code goes here ...
if (yourCodeHasBeenExecuted === true) {
window.clearInterval(timer);
}
}, interval);
I guess this will work, but it is not the most beautiful solution existing. A better way would be to use window resize or window scrolling events, depending of what you need, and execute your code there.
You find an example for a resize event here.
Everything works just fine, but when I remove
{queue:false, duration: 800, easing: 'easeInOutQuart'}
from
$(".chapters_list").slideDown(
with a 500, it stops working. So if I don't want easing in my script, it will work fine, when I insert easing into the top function, like is shown below, it stops working. Why wont it allow me to have easing?
$('.article_book_title').click(function () {
if ($(".chapters_list").is(":hidden")) {
$(".chapters_list").slideDown({queue:false, duration: 800, easing: 'easeInOutQuart'}, function () {
doSlide($('UL.chapters_list li:first'))
});
} else {
$(".chapters_list").slideUp({queue:false, duration: 800, easing: 'easeInOutQuart'});
}
});
function doSlide(current) {
$(current).animate({
backgroundColor:'#d6f4aa', color:'#eee'
},40, function() {
$(this).animate({backgroundColor:'#252525', color:'#fff'}, 500)
doSlide($(current).next('li'));
});
}
The shortcut methods like slideUp dont take an object config as an argument.. they take the duration and the call back. If you want more advance options you have to use the animate method.
slideUp API