调试易

想实现一个类似于二级菜单的功能，用两个div表示。
鼠标移到div1上时，先展开div1，再展开div2，移出时则相反。
问题是，当用鼠标很快地在div1上划过后，再把鼠标移到div1上，div1会展开，但是div2不显示了。
想了很久没想通，求分析。。
<div style="width:100px;height:30px;position:relative;background-color:Green;line-height:30px;" id="div1">
    div1
    <div style="width:200px;height:200px;position:relative;background-color:red;display:none" id="div2">div2</div>
</div>
    $(function(){
        $("#div1")
        .mouseenter(function(){           
            $(this).animate({"width":"200px"},"slow",function(){
                $("#div2").slideDown("slow");
            });
        })
        .mouseleave(function(){
            $("#div1").stop();
            $("#div2").slideUp("slow",function(){
                $("#div1").animate({"width":"100px"},"slow");
            });
        });
    });