Hello everyone! Here is the link to my codepen: http://codepen.io/reggiegulle/pen/zCHyn
As my code stands, it is fairly straightforward, and it does manage to accomplish what it was meant to do. It's just one basic timeline with buttons and all the following functions are grouped at the bottom of the code, like so:
$("#debeersTopPanel").on("click", function(){
debeers.tweenFromTo("ringFadeIn","ringPause");
});
function ringBack(){
$("#BackButton1").on("click", function(){
debeers.tweenFromTo("ringFadeOut","ringToStart");
});
}
$("#debeersBottomPanel").click(function(){
debeers.tweenFromTo("pendantFadeIn","pendantPause");
});
function pendantBack(){
$("#BackButton2").on("click", function(){
debeers.tweenFromTo("pendantFadeOut","pendantToStart");
});
}
function debeersResume(){
debeers.play(0);
I am fairly new at JavaScript, and so I am seeking some help on whether the code above can still become more elegant. The events on the timeline are mostly repetitive; could these repetitions be turned into iterations? I am still trying to get a better idea of objects and object arrays, and so I am not too sure whether those principles can apply to my codepen, or if other entirely different processes may be applicable.
It's just that there may be a chance that more items will be added to my present drop down menu, and so any method of streamlining the coding (if there is any) would be very useful.
I would appreciate any help. Thank you very much in advance!
(Note: I mostly specialize in video, so if anyone has any questions about it, I would not hesitate to help out as much as I can)