How to callback the button animation?

Question

I found a nice menu which have a background image fade out, as shown here

http://www.queness.com/post/411/create-an-attractive-jquery-menu-with-fadein-and-fadeout-effect

But however when I rapidly mouse over the button for few times, it will keep animate non stop. I was informed that I need to add in a "callback". I'm not a javascript programmer. Please help, the code is as below

<script type="text/javascript">
$(document).ready(function () {
 $('#navMenu li').append('<div class="hover"><\/div>');
 $('#navMenu li').hover(function() {
   $(this).children('div').fadeIn('1000'); }, 
  function() {
   $(this).children('div').fadeOut('1000'); 
 })
});
</script>