jquery issue with mouseenter() + animate()

Question

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

.top и .bottom находятся в display none, и когда мышь находится над .frame, с функцией Jquery animate, высота .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:100%; 
     position: absolute; 
    } 

    .top{ 
     display:none; 
     background-color:red; 
     width:100%; 
    } 

    .bottom{ 
     position:absolute; 
     display:none; 
     bottom:0px; 
     background-color:red; 
     width:100%; 
    } 

мой HTML:

<div class="frame"> 
    <div class="top">top</div> 
    <div class="middle">middle</div> 
    <div class="bottom">bottom<br>bottom<br>bottom<br>bottom</div> 
</div> 

и мой JQuery:

$(document).on('mouseenter mouseleave', '.frame', function(e) { 
     var el = $(this), 
      top = el.children('.top'), 
      bottom = el.children('.bottom'), 
      middle = el.children('.middle'), 
      d = bottom.height()+20, 
      mEnt = e.type == "mouseenter"; 

     if(mEnt == true){ 
      middle.stop().animate({'top':'20px'}); 
      el.stop().animate({ 
       'height':'+='+d, 
       'top':'-=20' 
      }); 
      top.stop().fadeIn(300); 
      bottom.stop().fadeIn(300); 
     }else{ 
      middle.stop().animate({'top':'0px'}); 
      el.stop().animate({ 
       'height':'-='+d, 
       'top':'+=20' 
      }); 
      top.stop().fadeOut(300); 
      bottom.stop().fadeOut(300); 
     } 
    }); 

здесь jsFiddle: http://jsfiddle.net/malamine_kebe/Y6cbQ/

Это хорошо работает, но когда мышь входит и уходит быстро, это все испортит. Я поставил .stop() перед всеми .animate(), но, похоже, это не помогает.

Answer 1

Вместо .stop().stop(true, true). Это делает так, что очередь анимаций очищается, и текущая анимация заканчивается немедленно (http://api.jquery.com/stop/).

Вы можете увидеть в скрипкой: http://jsfiddle.net/3gYtK/

$(document).on('mouseenter mouseleave', '.frame', function(e) { 
    var el = $(this), 
     top = el.children('.top'), 
     bottom = el.children('.bottom'), 
     middle = el.children('.middle'), 
     d = bottom.height()+20, 
     mEnt = e.type == "mouseenter"; 

    if(mEnt == true){ 
     middle.stop().animate({'top':'20px'}); 
     el.stop(true, true).animate({ 
      'height':'+='+d, 
      'top':'-=20' 
     }); 
     top.stop(true, true).fadeIn(300); 
     bottom.stop(true, true).fadeIn(300); 
    }else{ 
     middle.stop().animate({'top':'0px'}); 
     el.stop(true, true).animate({ 
      'height':'-='+d, 
      'top':'+=20' 
     }); 
     top.stop(true, true).fadeOut(300); 
     bottom.stop(true, true).fadeOut(300); 
    } 
});