jQuery, проблема с .animate () и .fadeIn ()

Внутри div .frame меня есть 3 других div: .top , .middle и .bottom .

.top и .bottom находятся на display none , а когда мышь закончилась .frame , с .frame функцией jquery, высота .frame увеличивается, а .top и .bottom отображаются с .fadeIn() .

Когда мышь отсутствует .frame , размер .frame уменьшается, а .top и .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 очень быстро и что моя мышь окончательно закончила .frame тогда .top и .bottom не хочу fadeIn и все, что я вижу, – это пустое