stevenhaskell/What_Are_You_Lifting_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Wrote function for plate animations

Browse Source 
Wrote functions for plate animations. Tried using setTimeout but it did not work. Need to look into it more.
This commit is contained in:
Steven Haskell
2018-10-23 12:48:00 -04:00
parent 6df908b04a
commit 1ec79be4ee
1 changed files with 79 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
js/plateAnimation.js
View File

@@ -1,37 +1,81 @@
function test () {
//checks if there are any plates showing
if (document.body.contains('.platevisual__plate')) {
//animates plates off
jQuery('.b-platevisual__plates--left').animate({
opacity: 0,
left: "-=37%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 0,
left: "+=37%",
}, {duration: 500, queue: false });
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "+=37%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "-=37%",
}, {duration: 500, queue: false });
} else {
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "+=37%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "-=37%",
}, {duration: 500, queue: false });
}
//replaces and animates html for plates required to bar.
//if statment works but need to figureout how to step animation.
if (jQuery('.b-platevisual__plate').length > 0) {
console.log("Test")
//animates plates off
jQuery('.b-platevisual__plates--left').animate({
opacity: 0,
left: "-16%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 0,
left: "116%",
}, {duration: 500, queue: false });
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "21%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "79%",
}, {duration: 500, queue: false });
} else {
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "21%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "79%",
}, {duration: 500, queue: false });
}
}
function animatePlatesOut () {
jQuery('.b-platevisual__plates--left').animate({
opacity: 0,
left: "-16%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 0,
left: "116%",
}, {duration: 500, queue: false });
}
function animatePlatesIn () {
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "21%",
}, {duration: 500, queue: false });
jQuery('.b-platevisual__plates--right').animate({
opacity: 1,
left: "79%",
}, {duration: 500, queue: false });
}
function test () {
//replaces and animates html for plates required to bar.
//if statment works but need to figureout how to step animation.
if (jQuery('.b-platevisual__plate').length > 0) {
console.log("Test")
//animates plates off
animatePlatesOut();
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
setTimeout(animatePlatesIn, 250);
} else {
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
animatePlatesIn();
}
}