freezing application until animation completes
I've got a side navigation bar with 9 items, each of them is bound to a hover action. However when I move over multiple items the animation continues and all the line items in the list start opening and closing in a random fashion. I want to "freeze" the application from performing the hover out and new hover items until the animation for the first is complete. Any ideas?
$("li").hover(
function () {
$('#sidenavmenu').animate( {marginTop:"0px" } );
$(this).animate( { height:"34px" });
$(this).css( {'background-image':"url('images/item_selected.jpg')"});
$(this).html(description[4]);
},
function () {
$('#sidenavmenu').animate( {marginTop:"12px" } );
$(this).animate( { height:"22px" });
$(this).css( {'background-image':"url('images/item.jpg')"});
$(this).html(section[4]);
}
);