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:
stevenhaskell committed 2018-10-23 22:37:52 -04:00
1 parent 9a2163c4dc
commit 8a708a7cad
2 files changed
+21 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.DS_Store
Vendored
BIN
View File
Binary file not shown.
js/Weight Calculation Script-Edited-Jquery-V4.js
+21 -51
View File
@@ -43,27 +43,27 @@
// 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 () {
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 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 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 });
}
//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();
}
}