.hover functions not firing correctly when rolled over too quickly

.hover functions not firing correctly when rolled over too quickly

I'm a jQuery nub, so I don't want to call this issue a bug, because I'm sure there is a solution I don't understand quite yet.

I am building a sliding menu with .hover() and I have a series of three functions within handlerIn() and three within handlerOut(). If you quickly run your mouse over and then off of the hover area, without letting the animate() function complete, the handlerOut() functions don't fire correctly.

Here's the page: http://www.sandiegopcsupport.com/cindi/joey/index.php

And here's the code for one of the three (all three are the same):
  1. //image sliders
  2. $('#build-nav').hover(function() {
  3.     $('#build-trans').animate({top:'180px'},{queue:false, duration:300, complete: function(){
  4.         $('#build-buttons').removeClass('hidden');
  5.         $('#build-words').addClass('hidden');
  6. }});
  7. }, /*effect for hover off->*/ function(){
  8.     $('#build-buttons').addClass('hidden');
  9.     $('#build-words').removeClass('hidden');
  10.     $('#build-trans').animate({top:'0px'},{queue:false, duration:300});
  11. });
The html:
  1. <div id="build-nav">
        <div id="build-trans">
          <div id="build-words"></div>
          <div class="hidden" id="build-buttons"></div>
        </div>
      </div>




The CSS:
  1. #build-nav {
        height: 180px;
        width: 300px;
        background-image: url(../images/build-300x180.gif);
        float: left;
    }
    #build-trans {
        height: 180px;
        width: 300px;
        position: relative;
    }
    #build-words {
        background-image: url(../images/trans-build.png);
        height: 180px;
        width: 300px;
        position: relative;
    }
    #build-buttons {
        height: 180px;
        width: 300px;
        color: #CCCCCC;
        position: relative;
        background-image: url(../images/trans-300x180.png);
        background-repeat: no-repeat;