マウスを非常に速く動かすとdiagonalFadeを止める方法？

Question

私は以下のコードを持っていますが、私が本当に素早くマウスを動かせば、画像はまだ消えて&です。

stop()私がanimate()を使用すると動作しますが、このプラグインを使用すると動作しません。私はそのようなことがうまくいくかもしれないと思ったが、私は数回の上にマウスを移動した場合に点滅し続ける

.person { float:left; width:180px; margin-bottom:40px; height:236px; margin-right:31px; } 
    .lastperson { margin-right:0; } 
.person a { display:block; width:180px; height:236px; overflow:hidden; position:relative; } 
.person img { position:relative; z-index:2000; } 
.name { display:block; width:170px; height:34px; background:url(../images/team-name.png) no-repeat top left; font-size:18px; color:#FFF; text-align:left; line-height:33px; padding-left:10px; float:left; position:relative; z-index:5000;} 
.overstate { left:0; top:0; position:absolute; z-index:3000; } 

$('.person a').live('mouseenter', function() { 
    $($(this).children('.overstate')).stop().diagonalFade({ 
    time: 350, 
    fadeDirection_x: 'left-right', 
    fadeDirection_y: 'top-bottom', 
    fade: 'out' 
    }); 
}).live('mouseleave', function() { 
    $($(this).children('.overstate')).stop().diagonalFade({ 
    time: 350, 
    fadeDirection_x: 'left-right', 
    fadeDirection_y: 'top-bottom', 
    fade: 'in' 
    }); 
}); 

HTML

   <div class="person"> 
        <a href="#"> 
         <img src="images/p1h.jpg" /> 
         <span class="name">Lee</span> 
         <span class="overstate"> 
          <img src="images/p1.jpg" />       
         </span> 
        </a> 
       </div><!--end person--> 

CSS

$('.person a').live('mouseenter', function() { 
    if (!$(this).children('.overstate').hasClass('animated')) { 

    $($(this).children('.overstate')).stop().diagonalFade({ 
    time: 450, 
    fadeDirection_x: 'left-right', 
    fadeDirection_y: 'top-bottom', 
    fade: 'out' 
    }); 

    } 
    }).live('mouseleave', function() { 
     $($(this).children('.overstate')).addClass('animated').stop().diagonalFade({ 
     time: 450, 
     fadeDirection_x: 'left-right', 
     fadeDirection_y: 'top-bottom', 
     fade: 'in', 
     complete: function() { $('.person a').children('.overstate').removeClass('animated'); } 
}); 

}）;

Answer 1

私は、単一のソリューションは、このようなものになるCANDという怖い：

<script> 
    var inactive = 1; 
    $(document).ready(function(){ 
     $('.person a').live('mouseenter', function(e) { 
      if(inactive==1){ 
       inactive = 0; 
       $($(this).children('.overstate')).stop().diagonalFade({ 
       time: 350, 
       fadeDirection_x: 'left-right', 
       fadeDirection_y: 'top-bottom', 
       fade: 'out', 
       complete:function(){ 
        inactive=1; 
       } 

       }); 
      } 
     }) 
     $('.person a').live('mouseleave', function() { 

       inactive = 0; 
       $($(this).children('.overstate')).stop().diagonalFade({ 
       time: 350, 
       fadeDirection_x: 'left-right', 
       fadeDirection_y: 'top-bottom', 
       fade: 'in', 
       complete: function(){ 
       inactive=1; 

       } 
      }); 

     }); 
}) 

</script> 

Answer 2

jQueryのヒント：$($(this).children('.overstate')).stop()が冗長です。 $(this).children('.overstate').stop()に電話することができます。