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