Two digits are missing at the end, why? Javascript output is in white and the desired numbers are in black above.
Js Code:
$('.count').each(function () {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(now);
}
});
});
You need to maintain trailing zeros choosing how much digit will be shown (with toFixed(n)). Three decimal in example below:
$(document).ready(function(){
$('.count').each(function () {
if($(this).text() % 1 != 0){
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(now.toFixed(3));
}
});
}else{
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 1000,
easing: 'swing',
step: function (now) {
$(this).text(now.toFixed(0));
}
});
}
});
});
https://jsfiddle.net/o2gxgz9r/9319/
Solved it using
$(this).text(valueOf(now));
instead of:
$(this).text(now);
Related
I have a script that animates from zero to its value. Is it possible to increment this number by more than one at a time?
e.g 1, 5, 10, 15...... 100
jQuery({ countNum: 0 }).animate({
countNum: jQuery('.ticker').text()
}, {
duration: 2000,
easing: 'swing',
step: function() {
jQuery('.ticker').text((Math.floor(this.countNum)));
},
complete: function() {
jQuery('.ticker').text((Math.floor(this.countNum)));
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker">100</div>
You can do it like this:
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ticker">100</div>
JS:
jQuery({ countNum: 0 }).animate(
{
countNum: jQuery(".ticker").text()/5
},
{
duration: 4000,
easing: "linear",
step: function () {
jQuery(".ticker").text(Math.floor(this.countNum)*5);
},
complete: function () {
jQuery(".ticker").text(Math.floor(this.countNum)*5);
}
}
);
I am currently creating a number counter (from 0 to a value) and I am having some trouble with getting the number to render if it's separated by a comma.
I have found some potential fixes such as toLocaleString but I can't get it to work - could anyone point me in the right direction?
Currently when I use 130,000 it returns NaN.
Thanks!
$('.panel-text-style-c').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toString());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>
The following above
In JS, a , is not valid for use in a value to be parsed to an integer. This is why you receive the NaN output.
To fix this use replace() to remove the comma before providing it to the Counter property:
$('.panel-text-style-c').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text().replace(/,/g, '')
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toLocaleString());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>
Try this code:
$('.panel-text-style-c').each(function() {
var num = $(this).text().replace(',', '');
$(this).prop('Counter', 0).animate({
Counter: num
}, {
duration: 2000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now).toString());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class='panel-text-style-c'>130,000</span>
I did some research and I couldn't understand what is 'Counter' ? is it predefined in js/jquery ? or is it a css property ?
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).text()
}, {
duration: 4000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now));
}
});
});
I've included the waypoints.js script on my site. Now I would like to connect this script with some jquery. The script should "start" if the content is in the viewport.
On a different site I used
$('.fly-in-animation').waypoint(function() {
$(this.element).addClass('animated fadeInUp');
}, { offset: '100%' });
But I've no idea how to connect the waypoints script with these jquery:
$({countNum: $('#counter-laender').text()}).animate({countNum: 14}, {
duration: 2000,
easing:'linear',
step: function() {
$('#counter-laender').text(Math.floor(this.countNum));
},
complete: function() {
$('#counter-laender').text(this.countNum);
}
});
Using the sample code from Waypoints site combined with what you provided (assuming you want this to happen when #counter-laender enters the viewport):
$(document).ready(function() {
$('#counter-laender').waypoint(function() {
myFunction();
});
});
function myFunction() {
$({
countNum: $('#counter-laender').text()
}).animate({
countNum: 14
}, {
duration: 2000,
easing: 'linear',
step: function () {
$('#counter-laender').text(Math.floor(this.countNum));
},
complete: function () {
$('#counter-laender').text(this.countNum);
}
});
}
I want to animate the Knob circle that it fills up on hovering. I'm new to Knob so i have no idea where my error is or if i even have the right direction. Right now it does not even show a circle :(
Basically i just want to have a circle around an icon that fills up on hovering. Maybe i can achieve that easier?
This is the sollution of it plus a little fix that i will start and stop at the right values, so you can interupt the animation without breaking it
the HTML:
<input type="text" value="0" id="circle" />
the Javascript:
$(function() {
$('.circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
$('.circle').parent().hover( function() {console.log("hover");
$({ value: $('.circle').val() }).animate(
{ value: 100 },
{ duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: $('.circle').val() }).animate(
{ value: 0 },
{
duration: 300,
easing: 'swing',
progress: function() {
$('.circle').val(Math.round(this.value)).trigger('change');
}
});
});
});
Here is the JSFiddle
you need to change the hover handler to the parent of #circle or change displayInput to true
$(function() {
$('#circle').knob({
min: '0',
max: '100',
readOnly: true,
displayInput: false
});
//$('#circle').parent() is the new div that contains the input and the canvas
$('#circle').parent().hover( function() {
$({ value: 0 }).animate(
{ value: 100 },
{ duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
}, function() {
$({ value: 100 }).animate(
{ value: 0 },
{
duration: 1000,
easing: 'swing',
progress: function() {
$('#circle').val(Math.round(this.value)).trigger('change');
}
});
});
});//you need to close with ');'
you need to include the knob.js in the fiddle or else you get a '404 Not Found' error and include jquery or else you get this error 'Uncaught ReferenceError: $ is not defined'
http://jsfiddle.net/dWsuP/1/