Jquery aufhören zu animieren, wenn ein anderer noch läuft

Question

Ich versuche, Element auf Hover-Element zu zeigen und zu verbergen. Mein Code funktioniert, aber wenn Benutzer Mouseover- und mouseout Element sehr schnell, Animation laufen und sogar :(

$('.EventNameList').hover(
    function() { 
     $(this).stop().animate({ backgroundColor: '#eaeaea' }, 200, "easeInQuad"); 
     $(this).find('div#TrainingActionButtons').show("fast"); 
    }, 
    function() { 
     $(this).stop().animate({ backgroundColor: '#ffffff' }, 800, "easeOutQuad"); 
     $(this).find('div#TrainingActionButtons').hide("fast");   
    }); 
    }); 

Und HTML mouseOut laufen:

<tr> 
<td class="EventNameList"> 
    <div id="TrainingActionButtons"> 
    Some text 
    </div> 
    </td> 
</tr> 

Answer 1

Ich weiß nicht über die Leistung auf diesem, aber Sie könnten alle Elemente zu stoppen und zu Ende gehen, im Gegensatz zu nur das aktuelle Element.

$('.EventNameList').hover(
    function() { 
     // stop([clearqueue], [jumpToEnd]) 
     $('.EventNameList').stop(true, true); 
     $(this).animate({ backgroundColor: '#eaeaea' }, 200, "easeInQuad"); 
     $(this).find('div#TrainingActionButtons').show("fast"); 
    }, 
    function() { 
     $(this).stop().animate({ backgroundColor: '#ffffff' }, 800, "easeOutQuad"); 
     $(this).find('div#TrainingActionButtons').hide("fast");   
    }); 
}); 

Answer 2

Sie könnten versuchen, stop(true,true) zu nennen - das wird klar die Effektwarteschlange und überspringe das Ende der gerade laufenden Animation Read more about it here