We Keep Coding

JavaScript animation lag after several loops

I am animating these dotted lines (SVG) for a project using velocity.js.
However, after a few loops, the animation starts to lag a lot.
I have pasted the link to my animation in the codepen below.
http://codepen.io/aofaoin/pen/pbLvAb?editors=0110
for (i = 1; i <= 69; i++) {
$("#gold2 .cls-" + i)
.velocity("fadeOut", {
delay: g2,
duration: 800,
})
.velocity("fadeIn", {
delay: 15,
duration: 800,
})
g2 += 80;
}
I can't use loop:true as i want to orchestrate/choreography the animation.
It would be great if anyone can tell me how can I stop the animation from lagging after a few loops. Thank you!

Looking at your code, I suggest wrapping your velocity manipulation inside of setTimeout(function() { ... }, 0). This will prevent browser from freezes caused by a big number of sync operations you try to do.
for (i = 1; i <= 69; i++) {
setTimeout(function() {
$("#gold2 .cls-" + i)
.velocity("fadeOut", {
delay: g2,
duration: 800,
})
.velocity("fadeIn", {
delay: 15,
duration: 800,
});
g2 += 80;
}, 0);
}
If you need to do your animation with delay, add dedicated delay in setTimeout.

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();
});

jQuery spin function - specify 20% spin upon image click?

I'm a jQuery newbie - but have managed to modify a roulette wheel script to spin a "pie" image for a homepage I'm working on.
It works great - but the client also want to add an arrow on either side that will advance the pie one section upon click - so clockwise for one arrow, counter-clockwise for another.
Is there a way to specify a partial spin?
Any guidance is much appreciated! I'm trying to meet a ridiculous deadline and am struggling with this.
Here's the page:
http://bluetabby.com/rr/index13.html
Here's the jQuery code so far - the functions I need to figure out are leftArrow and rightArrow:
$( document ).ready(function() {
window.WHEELOFFORTUNE = {
cache: {},
init: function () {
console.log('controller init...');
var _this = this;
this.cache.wheel = $('.wheel');
this.cache.wheelSpinBtn = $('.wheel');
this.cache.leftArrow = $('.leftarrow');
this.cache.rightArrow = $('.rightarrow');
//mapping is backwards as wheel spins clockwise //1=win
this.cache.wheelMapping = ['Mitzvahs','Galas','Florals','Props','Weddings'].reverse();
this.cache.wheelSpinBtn.on('load', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
this.cache.rightArrow.on('click', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
},
spin: function () {
console.log('spinning wheel');
var _this = this;
//disable spin button while in progress
this.cache.wheelSpinBtn.addClass('disabled');
/*
Wheel has 10 sections.
Each section is 360/10 = 36deg.
*/
var deg = 1000 + Math.round(Math.random() * 1000),
duration = 6000; //optimal 6 secs
_this.cache.wheelPos = deg;
//transition queuing
//ff bug with easeOutBack
this.cache.wheel.transition({
rotate: '0deg'
}, 0).delay(1000)
.transition({
rotate: deg + 'deg'
}, duration, 'easeOutCubic');
//move marker
_this.cache.wheelMarker.transition({
rotate: '-20deg'
}, 0, 'snap');
//just before wheel finish
setTimeout(function () {
//reset marker
_this.cache.wheelMarker.transition({
rotate: '0deg'
}, 300, 'easeOutQuad');
}, duration - 500);
//wheel finish
setTimeout(function () {
// did it win??!?!?!
var spin = _this.cache.wheelPos,
degrees = spin % 360,
percent = (degrees / 360) * 100,
segment = Math.ceil((percent / 5)), //divided by number of segments
win = _this.cache.wheelMapping[segment - 1]; //zero based array
console.log('spin = ' + spin);
console.log('degrees = ' + degrees);
console.log('percent = ' + percent);
console.log('segment = ' + segment);
console.log('win = ' + win);
//re-enable wheel spin
_this.cache.wheelSpinBtn.removeClass('disabled');
}, duration);
},
resetSpin: function () {
this.cache.wheel.transition({
rotate: '0deg'
}, 0);
this.cache.wheelPos = 0;
}
}
window.WHEELOFFORTUNE.init();
});//]]>
Thanks for any pointers!

I looked through your code and figured out you are using transit.js to do the spinning animations. Essentially, the object's css (transform "rotate") is being updated over a certain amount of time (like jQuery's animate).
You can extend your wheel of fortune object with spinright and spinleft functions (or whatever name you prefer), which you can bind to the keys/buttons that you'll create. Your code would look something like this:
WHEELOFFORTUNE.spinright = function() {
// get current degree of wheel and convert to integer
var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
this.cache.wheel.transition( { "rotate": (degree + 73) + "deg" },1000 );
}
WHEELOFFORTUNE.spinleft = function() {
var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
this.cache.wheel.transition( { "rotate": (degree - 73) + "deg" },1000 );
}
Then you can bind these functions to buttons or call the functions directly in console:
WHEELOFFORTUNE.spinright()
WHEELOFFORTUNE.spinleft()
Note: 73deg looks to be about the amount that 1 section is, but you'll probably have to play around with the numbers. You may also want to cache the degrees in your object as well. You probably will also need to figure out a way to center on each section per button press.
Cheers!

Slide Up Linear Easing First Step Does Nothing

I'm developing an accordion plugin, and it's mostly done except for one bug where for the first few steps of the slideUp/slideDown, the accordion is 1px taller than it's meant to be, causing a visual bug. I've narrowed it down to the fact that the first step in the slideUp animation doesn't do anything, and I can't figure out why. Here's an example:
console.log('Start');
var diff = 0;
var upNow = 100;
var downNow = 0;
$.fx.interval = 1000;
var duration = $.fx.interval * 100;
$("#div1").slideUp({
easing: 'linear',
duration: duration,
step: function(now) {
if (now != 0 && now > 90) {
console.log("Slide Up: " + now);
upNow = now;
}
}
});
$("#div2").slideDown({
easing: 'linear',
duration: duration,
step: function(now) {
if (now != 0 && now < 10) {
downNow = now;
diff = 100 - (upNow + downNow);
console.log("Slide Down: " + now);
console.log("Slide Difference:" + diff);
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div style='height: 100px; background-color: red;' id='div1'>
</div>
<div style='height: 100px; background-color: blue; display: none;' id='div2'>
</div>
http://jsfiddle.net/hbh6U/
The problem is that I need these to be in sync, and I can't figure out why they're not, or how to get them in sync. One idea I've had is to skip the first step of the slideDown animation, but I'm not sure how to do that either. Has anyone got any ideas, or faced this bug before?

The problem comes down to this line in jQuery's internal defaultPrefilter method:
tween.start = prop === "width" || prop === "height" ? 1 : 0;
This causes the animation for the second div (from 1px to 100px) to be shorter than that of the first div (from 0 to 100px).
To solve this modify your step function like this:
function linearStep(now, animation){
var animationStart = animation.start;
if (animationStart === 1){
animationStart = 0;
}
animation.now = (animation.end - animationStart ) * animation.pos + animationStart;
}
It overwrites the calculated now value by doing the same calculation with a fixed animationStart, which is 0 instead of 1.
This will break if the animation actually starts at 1, but there'd be other ways to handle it then.
Side-by-side Fiddle: http://jsfiddle.net/Nd3w2/3/

i don't exactly know where is this issue coming from... Sunday morning... not too much time to investigate... But i found two possible solution based on your fiddle...
First one was to wrap these two DIVs in another DIV with overflow:hidden.
Second one... probably more appropriate is to call "slide" function only on one of the divs and then update the size of second one in callback, something like that:
console.log('Start');
var diff = 0;
var upNow = 100;
var downNow = 0;
$.fx.interval = 1000;
var duration = $.fx.interval * 100;
$("#div1").slideUp({ easing: 'linear', duration: duration, step: function(now)
{
if(now != 0 && now > 90)
{
console.log("Slide Up: " + now);
upNow = now;
}
$("#div2").height(100- $("#div1").height());
}});
Also remove "disply:none" form div2 styles...
It fixes the issue and is a bit more elegant solution in my opinion... Calling two separate animation functions can lead to possible sync problems... Hope that helps...

Countdown using javascript

I'm trying to create a countdown for a quiz I created. The quiz will create a percentage and I am trying to create a JavaScript function that will count down from 100% to the users quiz score percentage.
Also is it possible to change the color of the percentage while it's counting down?
Example 100% Green and it starts to fade to red when it hits 59% and below?
What I am working with now:
<div id="counter">
</div>
var stop = 6;
for(i=1; i <= 100; i++) {
$('#counter').append('<p>' + i + '%');
}
$('#counter').cycle({
delay: 600,
fx: 'none',
backwards: true,
speed: 300,
timeout: 60,
autostop: 1,
autostopCount: stop,
});
Link:http://jsfiddle.net/joshsmith/WE3UA/4/
Thank You

This will make it change from pure green at 100% to pure red at 50%. I'm not sure if you wanted it to stay green all the way down to 60%. If you want that, then just put a ternary statement into the green function like this "return i > 60 ? 255 : Math.round(256*(i+40)/50-256)"
var stop = 60;
function green(i) { return Math.round(256*i/50-256); }
function red(i) { return 256-green(i); }
function toHex(c) { var h = c.toString(16); return h.length > 1 ? h : '0'+h; }
function color(i) { return i <= 50 ? 'f00' : toHex(red(i)) + toHex(green(i)) + '00'; }
for(i=1; i <= 100; i++) {
$('#counter').append('<p style="color: #' + color(i-1) + '">' + i + '%');
}
$('#counter').cycle({
delay: 600,
fx: 'none',
backwards: true,
speed: 300,
timeout: 60,
autostop: 1,
autostopCount: stop,
});

Looks like you'e already doing a pretty good job on the countdown itself.
You can easily animate colors using something like this jQuery color plugin:
https://github.com/jquery/jquery-color

Since your cycle plugin just iterates through a lot of elements that have already been created, you can simply set the paragraphs for valeus below 59 to whatever value you want.

You get a after event which gets fired after every tick. You could use that to change the color of your text.
var stop = 6;
for(i=1; i <= 100; i++) {
$('#counter').append('<p>' + i + '%');
}
var nCounter = 0;
$('#counter').cycle({
delay: 600,
fx: 'none',
backwards: true,
speed: 300,
timeout: 60,
autostop: 1,
autostopCount: stop,
after: function(currSlideElement, nextSlideElement, options, forwardFlag)
{
nCounter++
var percent = nCounter /stop * 100;
if(percent < 10)
{
$('#counter').css("color", "red");
}
}
});

U Just Need to Make Increment In RGB Values According to User Progress.
Try it out :)
var c1=c2=c3=0;
for(i=1; i <= 100; i++)
{
document.getElementById("#counter").style.color=rgb(c1,c2,c3);
if(i>30 && i<60)
{
c2++;
}
}