More efficient switch statement in jQuery/JavaScript -
i'm working on app uses switch statement provide custom animations depending on link has been clicked trigger animation. seems lot of code want, i'm having little trouble figuring out better way it.
what happens when click on link, div open reveal hidden content , other divs slide side of screen. kinda custom accordian.
my switch statement looks - history paramater taken id of clicked link. divs stored in object called rpsobject.
switch( history ) { case "biography" : $("#" + rpsobject.boxid[1]).myanimation(); $("#" + rpsobject.boxid[2]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[3]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[4]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[5]).fadeincloselink(); break; case "blog" : $("#" + rpsobject.boxid[0]).myanimation(); $("#" + rpsobject.boxid[2]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[3]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[4]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[5]).fadeincloselink(); break; case "diary" : $("#" + rpsobject.boxid[0]).myanimation(); $("#" + rpsobject.boxid[1]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[3]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[4]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[5]).fadeincloselink(); break; case "reviews" : $("#" + rpsobject.boxid[0]).myanimation(); $("#" + rpsobject.boxid[1]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[2]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[4]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[5]).fadeincloselink(); break; case "images" : $("#" + rpsobject.boxid[0]).myanimation(); $("#" + rpsobject.boxid[1]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[2]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[3]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[5]).fadeincloselink(); break; case "contact" : $("#" + rpsobject.boxid[0]).myanimation(); $("#" + rpsobject.boxid[1]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[2]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[3]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[4]).fadeincloselink(); break; } hopefully should pretty obvious i'm doing here!
the functions myanimation() , fadeincloselink() custom functions. latter must performed on last item of object, on complete trigger custom animation selected div. function fadeincloselink() following:
$.fn.fadeincloselink = function() { $(this).animate({ "left" : "640px", "top" : "320px", "height" : "80px" }, 300, function(){ disfull.animate({ "opacity" : "toggle", "height" : "toggle" }, 500); }); } where disfull refers div affected.
hopefully clear enough question across.
here came quickly
var historyitems = "biography,blog,diary,reviews,images,contact".split(",") var currentsettings = []; (var i=0;i< historyitems.length; i++) { if (historyitems[i] != history) currentsettings.push(i) } $("#" + rpsobject.boxid[currentsettings[0]]).myanimation(); $("#" + rpsobject.boxid[currentsettings[1]]).myanimation({ top : 80 }); $("#" + rpsobject.boxid[currentsettings[2]]).myanimation({ top: 160 }); $("#" + rpsobject.boxid[currentsettings[3]]).myanimation({ top: 240 }); $("#" + rpsobject.boxid[currentsettings[4]]).fadeincloselink();
Comments
Post a Comment