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