Looping Graph Animation - javascript

I saw this codepen: https://codepen.io/alex_rodrigues/pen/ogYZdr You can see the javascipt code here:
setTimeout(function start (){
$('.bar').each(function(i){
var $bar = $(this);
$(this).append('<span class="count"></span>')
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*100);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: 2000,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
}, 500)
I want the graph to complete the animation, stall for 3-5 seconds then repeat the animation. Currently, it completes the animation, but there is no loop. Any help is much appreciated. Thank you!

You can create a function that:
Resets the bar's width and content
Restarts the animation.
This function can be set to be called after:
($('.bar').length - 1) * 100 + 2000 + your_chosen_delay_in_ms
For this to work, we have to pull out all the things that don't need repeating, like $(this).append('<span class="count"></span>').
Combined, it would look like this:
var animation_offset = 100;
var animation_duration = 2000;
var reanimate_delay = 3000;
function animateBars() {
$('.bar').each(function(i){
var $bar = $(this);
setTimeout(function(){
$bar.css('width', $bar.attr('data-percent'));
}, i*animation_offset);
});
$('.count').each(function () {
$(this).prop('Counter',0).animate({
Counter: $(this).parent('.bar').attr('data-percent')
}, {
duration: animation_duration,
easing: 'swing',
step: function (now) {
$(this).text(Math.ceil(now) +'%');
}
});
});
setTimeout(
reAnimateBars,
(
($('.bar').length - 1) * animation_offset // Moment the last bar starts animating
+ animation_duration // Animation duration
+ reanimate_delay // Your chosen delay
)
);
}
function reAnimateBars() {
// Reset the bars
$('.bar .count').text('');
$('.bar').css('width', '0%');
// This will take some time (as per CSS transition property) to reset.
// So we have to wait for that too.
// Start the animation (again)
// after CSS transition time for resetting is over
setTimeout(animateBars, animation_duration);
}
setTimeout(function() {
// Put non-repeating things here:
$('.bar').append('<span class="count"></span>');
// Start animation (first time)
animateBars();
}, 500);

Related

jQuery Progress Bar Animation When Scroll Point Less Than a Certain Number

I am trying to make my progress bar animate when the container box reaches a certain scroll point on the screen.
let targetPosition = target.getBoundingClientRect();
var getStarted = setInterval(loading, 1);
function loading() {
if (targetPosition.Top < 50) {
$(".skill-bar").each(function () {
var $this = $(this);
var per = $this.attr("per");
$this.css("width", per + "%");
$({ animatedValue: 0 }).animate(
{ animatedValue: per },
{
duration: 2000,
step: function () {
$this.attr("per", Math.floor(this.animatedValue) + "%");
},
complete: function () {
$this.attr("per", Math.floor(this.animatedValue) + "%");
},
}
);
});
}
}```

stop a function on jquery

I have a problem with a jquery function.
When I launch my page, my progress bars come alive as expected, but they come alive without ever stopping ... I would like the code to run once.
here is the code and the function.
Thank you very much for your help.
here is the code
function loadBar() {
var delay = 500;
$(".progress-bar").each(function(i) {
$(this).delay(delay * i).animate({
width: $(this).attr('aria-valuenow') + '%'
}, delay);
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: delay,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now) + '%');
}
});
});
}
$(document).ready(function() {
// au clic sur un lien
$('#webLangages').on('click', function() {
loadBar();
});
});
var target = $("#third").offset().top;
var interval = setInterval(function(event) {
if ($(window).scrollTop() > target) {
//start loading progress bar
loadBar();
loadBar.stopNow();
}
}, 1000);

How to change the time between each bx-Slider slides after initial binding?

On my page I have a few bx Sliders. They're set up like this:
$('#bxslider1').bxSlider({
auto: true,
mode: 'fade',
speed: 2000,
slideMargin: 160,
pause: Math.floor((Math.random() * 5000) + 1500)
});
Is there any possibility to set the pause option of the slider for the first change on 2000, but from this point it should be a random time between 1500 and 5000. So is there any way to change the pause option after the first slide/fade?
Thx for your help
I don't think the bx Slider has that type of support, here is a solution that might work. It is untested but might point you into the right direction:
JAVASCRIPT:
function Timer(timeout) { //timer function to keep track of slide speed.
var self = this;
var time = 0;
this.interval = timeout ? timeout : 1000; // Default
this.run = function (runnable) {
interval = setInterval(function () { runnable(self); time += 1; }, this.interval);
};
var pauseCalc = Math.floor((Math.random() * 5000) + 1500); //You can do your pause calculations here
if ($('#bxslider1').length > 0 && time == 0) { // Check if the contol exists and time == 0
$('#bxslider1').bxSlider({
auto: true,
mode: 'fade',
speed: 2000,
slideMargin: 160,
pause: pauseCalc // original pause
});
} else if (time == 2) {
$('#bxslider1').unbind(); // Unbind the control first then re-bind
$('#bxslider1').bxSlider({
auto: true,
mode: 'fade',
speed: 2000,
slideMargin: 160,
pause: pauseCalc //Add new pause after 2 sec
});
clearInterval(interval); //Stop the timer;
}
clearInterval(this.interval);
}
//invoke the timer
Timer.run(1000);

jQuery - end setinterval after X rund

I have a little slider im working on which is almost there im jsut having some trouble with me jQuery.
So first off:
I want my slider to reset after the interval has run x amount of times.
It was my understanding that the following would work but it doesn't seem to take. 6000, slides, function() { homesliderend();
so lets say slides = 2 set interval should call homesliderend(); but it doesn't the interval just keeps running.
Second Issue: I'm also trying to get it to add 100% to lengther every 6 seconds. But instead of adding 100 each time its just setting it to 100 its not multiplying.
jQuery(document).ready(function($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
setInterval(function() {
var tn = n + 100;
$(".lengther").animate({
left: "-" + tn + "%"
}, 500);
}, 6000, slides, function() {
homesliderend();
});
}
homeslider();
});
The setInterval will not stop automatically, you need to clear the interval to stop it.
Also you need to increase the value of n to increase the left param
jQuery(document).ready(function ($) {
"use strict";
function homesliderend() {
$(".lengther").animate({
left: "0%"
}, 500);
}
function homeslider() {
var slides = $(".slide.t-align").length,
lwidth = slides * 100,
n = 0;
$(".lengther").css("width", lwidth + "%");
var interval = setInterval(function () {
var tn = ++n * 100;
$(".lengther").animate({
left: "-" + n + "%"
}, 500);
//if the last item is slided then stop the animation and run homesliderend
if (n == slides) {
clearInterval(interval);
homesliderend();
}
}, 6000);
}
homeslider();
});

Make animation with several div's in a loop

I have a working animation jquery script here: jsfiddle
var speed = 1500;
var margin = 50;
var start = 200;
var next = 1400;
setTimeout(function() {
$("#foo").show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * 0);
setTimeout(function() {
$("#bar").show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * 1);
setTimeout(function() {
$("#foobar").show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * 2);
I would like to change all the div id's into classes and then run a loop in jquery instead - similar to this: animating-several-divs-in-a-sequence.
$(function () {
function show() {
$('.project_box:not(.completed):first').show(500, function () {
$(this).addClass('completed');
show();
});
}
show();
});
I would also like to run the animation from outside the body-tag ("startPoint") and make it end at its current "endPoint".
Any help is much appreciated!
Note: Please have in mind, that I'm a newbie into jQuery and English is not my spoken language. :-)
Here suppose you name the class as class="test". you can do this :
$(document).ready(function(){
var speed = 1500;
var margin = 50;
var start = 200;
var next = 1400;
$('.test').each(function(index,element){
setTimeout(function() {
$(element).show().animate({
// marginLeft: startPoint,
marginLeft: margin // endPoint
}, speed);
},start + next * index);
});
});
see here : http://jsfiddle.net/w7o0vezs/

Categories