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);
}
});
}
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 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));
}
});
});
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);
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/
$comment.animate({width: 0}, {queue:false, duration:450 }, function() {
//$comment.css({ 'display': 'block' })
$comment.hide();
});
it doesn't show animation. i guess that i have put a function is wrong place.
Per the docs, if you specify options, include the callback in the options rather than separately:
$comment.animate({width: 0}, {
queue: false,
duration: 450,
complete: function() {
//$comment.css({ 'display': 'block' })
$comment.hide();
}
});