Issue with preventing menu interaction during animation

Issue with preventing menu interaction during animation

Hello all. Im really stuck at this and out of ideas.

Basically I have li#a, li#b, li#c that changes the main content.

One click too many times and it messes up. So i unbinded the li click functions while the animation is taking place.

However i am having an issue trying to bind them back. Here is the code:

function selectAbout() {
$("div#bodyContainer > *:visible")
.hide("drop", {direction: "right"}, 1800),

$("div#bodyContainerAbout")
.delay(1900, function(){
$(this).show("drop", {direction: "left"}, 1800);
});

}


$("div#headerMiddleMenuContainer ul li#a")
.click(function() {
$("div#headerMiddleMenuContainer ul >*").unbind('click'),
selectAbout(),
<!-- How do I bind back the controls for all the li over here? .bind('click') not producing results-->
});

Thanks in advance!