Comment arrêter diagonalFade si je déplace la souris très rapidement?

Question

J'ai le code suivant mais si je bouge la souris très rapidement, les images disparaissent toujours en & en permanence.

stop() fonctionne si j'utilise animate() mais quand j'utilise ce plugin ce n'est pas le cas.

$('.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 { 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; } 

Je pensais que quelque chose comme ça pourrait fonctionner, mais continue de clignoter si je déplace la souris sur deux ou trois fois

$('.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

Je crains que la seule solution cand quelque chose comme ceci:

<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

pointe jQuery: $($(this).children('.overstate')).stop() est redondant. Vous pouvez simplement appeler $(this).children('.overstate').stop().