Multiple instances of a function

Firstly, please pardon me as I'm extremely new to both JavaScript and jQuery. This also may be a JavaScript related question rather than jQuery specifically, but here goes:

I have a simple navigation menu. On hover, the block element changes background color. I'm also fading in/out a div layer. I'm also using the jQuery Color Animations plugin. Very simple to accomplish and I had no trouble doing so.

However, I don't want to have to use a whole new function for each individual element, so I wrote the following:

$("div[id^=div]").css('display','none');

$("a[id^=a-nav]").hover(function() {
   var tabSelected = $(this).attr("id");
   tabSelected = tabSelected.split("-");
   var aNav = "a[id=a-nav-" + tabSelected[2] + "]";
   var divDesc = "div[id=div-desc-" + tabSelected[2] + "]";
   
   $("div[id^=div-desc]").css('display','none');
   $(aNav).animate({backgroundColor: "#383838"}, 450);
   $(divDesc).fadeIn("slow");
},function(){
   $("div[id^=div-desc]").fadeOut("slow");
   $("a[id^=a-nav]").animate({backgroundColor: "#272727"}, 450);
})

It grabs the current element id and splits it into an array so I can use it for any of the navigation elements.

However, since there is an animation going on, the fading out animation needs to complete before the next starts. Is there any way to accomplish multiple events going on at the same time with just one function, or do I need a separate one for each element?

An example of what I'm referring to can be seen here: http://temp.adamreyher.com/sdm/

Hopefully my question makes sense.

- Adam

• Topic Participants

• adam