Fluid Navigation using JQuery Animate Function

I promised I would do some writing on JQuery and give some examples of how to easily leverage that technology. JQuery can be an incredibly powerful enhancement to the UX of a page and (in some cases) the aesthetics. For the moment, I'm going to avoid the many plug-ins and add-on libraries, because they are as numerous as the stars. I highly recommend taking an evening and Googling or Binging (If that's a word?) "JQuery plugins", just to get a look at what's out there. It's truly amazing!

For one project, I needed to create a navigation process to scroll through different views of interactive elements, without leaving the homepage. All within the core library for JQuery, it has extensive support for animation, using the function example:

$('#[Tag to be animated]').animate({[CSS property]:'[Value]',},[speed in milliseconds, where 1000 = ~1 second]);

Keeping in mind, that I had nine "windows" or collections of differing interactive elements (Images, links, etc.), this is the code that drives things. It answers to handlers from different menu options or elements within the "windows" themselves, giving me the ability to scroll through a large Div, by showing only a fixed portion (Equally spaced nested Div's) at a time.

The below function allowed me to pass in a parameter to tell the function were to navigate next, based on static logic (The content of the "window" elements are in most cases dynamic, but they will always appear on the same static "window" position). These elements are refreshed with each "if" case, as it can't be known from which "window" the visiting human will be on when selecting a new option. When a match is found in the "if" cases, it performs the animation at the bottom, were all other windows are animated to full transparency, while the selected "window" is animated to full opacity. Hence, not only are the "windows" moving in and out of view to guide navigation, but they are also fading in and out. Visit www.tmcacademy.com and try a few options to see it in action!

function MoveOver(option)
{
var scrollThis;
var boxHome = 'home';
var boxPrograms = 'programs';
var boxEnrollment = 'enrollment';
var boxAboutUs = 'aboutus';
var boxFaqs = 'faqs';
var boxStaff = 'staff';
var boxCalendar = 'calendar';
var boxDirections = 'directions';
var boxContactUs = 'contactus';
var boxCommunityLinks = 'communitylinks';
var show;
var wipe1;
var wipe2;
var wipe3;
var wipe4;
var wipe5;
var wipe6;
var wipe7;
var wipe8;
var wipe9;

if(option=='home')
{
scrollThis = 0;
wipe1=boxPrograms;
wipe2=boxEnrollment;
wipe3=boxAboutUs;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxHome;
}
if(option=='programs')
{
scrollThis = 1000;
wipe1=boxHome;
wipe2=boxEnrollment;
wipe3=boxAboutUs;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxPrograms;

}
if(option=='enrollment')
{
scrollThis = 2000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxAboutUs;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxEnrollment;
}
if(option=='about')
{
scrollThis = 3000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxFaqs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxAboutUs;
}
if(option=='faqs')
{
scrollThis = 4000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxStaff;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxFaqs;
}
if(option=='staff')
{
scrollThis = 5000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxCalendar;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxStaff;
}
if(option=='calendar')
{
scrollThis = 6000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxDirections;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxCalendar;
}
if(option=='directions')
{
scrollThis = 7000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxCalendar;
wipe8=boxContactUs;
wipe9=boxCommunityLinks;
show=boxDirections;
}
if(option=='contact')
{
scrollThis = 8000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxCalendar;
wipe8=boxDirections;
wipe9=boxCommunityLinks;
show=boxContactUs;
}
if(option=='community')
{
scrollThis = 9000;
wipe1=boxHome;
wipe2=boxPrograms;
wipe3=boxEnrollment;
wipe4=boxAboutUs;
wipe5=boxFaqs;
wipe6=boxStaff;
wipe7=boxCalendar;
wipe8=boxDirections;
wipe9=boxContactUs;
show=boxCommunityLinks;
}

 $("#insideFooter").animate({
    marginLeft: '-'+scrollThis+'px',
     },500);
    $('#'+show+'').animate({
    opacity:'1.0',
    },1000);  
    $('#'+wipe1+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe2+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe3+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe4+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe5+'').animate({
    opacity:'0.0',
    },1000);            
    $('#'+wipe6+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe7+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe8+'').animate({
    opacity:'0.0',
    },1000);
    $('#'+wipe9+'').animate({
    opacity:'0.0',
    },1000);    
}

Just in case, an example of a calling handler would be the following (Being included within an HTML element):

<a href="#" onclick="javascript: MoveOver('home');">HOME</a>