div+mouseenter+mouseout模拟title怎么添加延时？

div+mouseenter+mouseout模拟title如何添加延时？？？
为了防止鼠标快速划过使模拟title的div显示出来，需要对mouseenter增加适当的延时，类似于悬停之上0.5秒后才开始显示title的效果，请教大家如何实现？？

<div  id="test">offset</div>

<div id="title">

Hello World.

</div>

$(function() {

$("#test").bind({"mouseenter": function() {  

    $("#title").stop(true).delay(100).show();

},

"mouseout": function() {    

    $("#title").hide();

}});

});

#title {

    width:100px;

    height:100px;

    display:none;

    position:absolute;

    background-color:red;

}





#test {

    	position:absolute;

    text-align:center;

    left:20%;

     top:20%;

    right:50%;

    bottom:50%;

    background-color:gray;

    border: 1px solid ;

}

------解决方案--------------------

引用:

一开始title是这样子的
<div id="title">
Hello World.
</div>
通过跟踪代码可以发现，当快速划动几次后，html代码变成如下的样子：

<div id="title" style="display: none; height: 1px; margin: 0px; padding: 0px; width: 1px; overflow: hidden; opacity: 0;">

Hello World.

</div>

是什么原因呢？？透明了，长度宽度变成了1，还增加了不少其它属性，为什么，求解答？？

这个我也不是很清楚原因，可能是动画没有清除干净吧，
不过把stop(true, true)这样子貌似好点