jquery mouseenter mouseout 多次

下面是自己写的一段代码。
现在遇到一个问题，请求高手的帮助。如何设置： 在slideUp和slideDown的过程中，mouseenter mouseout无效，只有在完成mouseout的过程后，再次mouseenter，才重新开始新的 slideUp和slideDown。不要记住所有mouseenter mouseout的总次数，当鼠标快速的反复进出DIV区后，即时鼠标移动出DIV区，也会反复运行slideUp和slideDown，直至完成前面的总次数才停止。 谢谢。<!DOCTYPE HTML>
<html>
<head>
<title>jQuery SlideDown() / SlideUp()</title>
<style type="text/css"> 
.text {
float: left;
position: relative;
overflow: hidden;
width:300px;
height:200px;
}

.title {
position: absolute;
top: 0px;
left: 0px;
display: none;
background-color: black;
color: white;
padding: 10px;
width: 100%;
height: 80px;
z-index: 10;
}
</style>
<script type="text/javascript" src="jquery.1.61.js"></script>
<script type="text/javascript">
(function( $ ){
  
$('.text').live('mouseenter',function() {

$(this).find('.title').slideDown(500); }); $('.title').live('mouseenter',function() {

$(this).css("display","block");   

});

$('.text').live('mouseout',function() {

$(this).find('.title').slideUp(500);

}); })(jQuery);
</script>
</head>
<body>
<div class="text">
Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. Main text. 
<span class="title">title text. title text. title text. title text. title text. title text. title text. title text.</span>
</div>
</body>
</html>