fadeIn элемент fadeOut при наведении другого, не работает должным образом

У меня есть этот HTML:

<div id="mask"></div>
<div id="menu">
    <ul>
        <li><a href"#"></a></li
        <li><a href"#"></a></li
        <li><a href"#"></a></li
    </ul>
</div

И CSS:

#mask {
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    z-index:130;
    background-color:rgba(10,10,10, 0.6);
    display: none;
}

Я хочу, чтобы #mask появлялась с fade на #menu hover, и я делаю это с помощью следующего jquery:

<script type="text/javascript">
   $(function(){
     $('#menu').hover(over, out);
   });

   function over(event)
   {
     $('#mask').fadeIn(1000);
     $('#mask').css("display","block");
   }
   function out(event)
   {
     $('#mask').fadeOut(1000);
   }
 </script>

Он работает нормально, но проблема в том, что если мышь много раз перемещается в и из #меню до истечения тайм-аута 1сек, тогда # маска продолжает исчезать и выходить за столько раз, когда мышь перемещалась и выходила из меню... мне нужно что-то в коде, чтобы остановить запуск действия наведения на 1 с после первого триггера.

Надеюсь, ты понял, что я имею в виду.

Спасибо.

SOLVED, немного работая над идеей Крейга Ритера с помощью метода.stop(). добавлена одна строка перед.fadeIn

<script type="text/javascript">
$(function(){
    $('#menu-eng').hover(over, out);
});
function over(event)
{      
$('#mask').stop("opacity","0.9");       
$('#mask').fadeIn(1000);
$('#mask').css("display","block");
}
function out(event)
{      
$('#mask').fadeOut(1000);
}
</script>