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

Updated plate animation script

Browse Source 
Updated the plate animation to slide the plates off as the weight is recalculated and then slides them back on. Still need to delay the html code update.
This commit is contained in:
Steven Haskell
2018-10-23 22:37:52 -04:00
parent 9a2163c4dc
commit 8a708a7cad
2 changed files with 21 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

40
js/Weight Calculation Script-Edited-Jquery-V4.js
View File

@@ -43,7 +43,7 @@
// var plateloader = jQuery(".b-platevisual__plates").html('<img src="images/45lbs-Plate.svg" class="b-platevisual__plate b-platevisual__plate--45">');
// console.log(plateloader);
function animatePlatesOut () {
function animatePlatesOut() {
jQuery('.b-platevisual__plates--left').animate({
opacity: 0,
left: "-16%",
@@ -52,9 +52,9 @@ function animatePlatesOut () {
opacity: 0,
left: "116%",
}, {duration: 500, queue: false });
}
}
function animatePlatesIn () {
function animatePlatesIn() {
jQuery('.b-platevisual__plates--left').animate({
opacity: 1,
left: "21%",
@@ -63,7 +63,7 @@ function animatePlatesIn () {
opacity: 1,
left: "79%",
}, {duration: 500, queue: false });
}
}
//plate calulation function
@@ -109,46 +109,16 @@ function animatePlatesIn () {
//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("If Statment Fired")
//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 });*/
//animates plates off
animatePlatesOut();
//updates plates
jQuery(".b-platevisual__plates").html(weighthtml);
//animates plates back on
setTimeout(animatePlatesIn(), 250);
setTimeout(animatePlatesIn, 500);
} 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 });*/
//animates plates back on
animatePlatesIn();
}
}