jQuery，问题与.animate（）和.fadeIn（）

在div .frame里面我还有3个div： .middle ， .middle和.bottom 。

.bottom和.bottom display none ，当鼠标位于.bottom上时，jquery函数为animate ， .bottom的高度增加， .bottom和.bottom显示为.fadeIn() 。

当鼠标超出.bottom ， .bottom的大小正在减小，而.bottom和.bottom将以.fadeOut()消失。

我的CSS是：

 .frame{ border-style: solid; border-width: 1px; width:200px; height:200px; position: absolute; top:50px; left:50px; } .middle{ width:200px; height:200px; position: absolute; top:0px; } .top{ display:none; background-color:red; width:100%; } .bottom{ position:absolute; display:none; bottom:0px; background-color:red; width:100%; } 

我的HTML：

 
 
top
 
middle
 
bottom
bottom
bottom
bottom
  

和我的jQuery：

 var t, h; $(document).on('mouseenter mouseleave', '.frame', function( e ) { var el = $(this), top = el.children('.top'), bottom = el.children('.bottom'), middle = el.children('.middle'), mEnt = e.type == "mouseenter"; if(t == null){ t = el.offset().top; h = el.height(); } if(mEnt == true){ middle.stop().animate({'top':'20px'}); el.stop().animate({ 'height':h+bottom.height()+20, 'top':t-20 }); top.stop().fadeIn(300); bottom.stop().fadeIn(300); }else{ middle.stop().animate({'top':'0px'}); el.stop().animate({ 'height':200, 'top':t }); top.stop().fadeOut(300); bottom.stop().fadeOut(300); } }); 

你可以在jsFiddle中看到效果： http ： //jsfiddle.net/malamine_kebe/WE25E/

我的问题（你不能在jsFiddle中看到它，但在我的电脑中它看到它）是我进入和离开.frame真的很快，我的鼠标.bottom超过.frame然后.bottom和.bottom没有想要fadeIn ，我能看到的只是一片空白