Jquery stop animate if another still running

I try to show and hide element on hover element. My code works, but when user mouseover and mouseout element very fast, animation run and run even mouseout it :(

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

And HTML:

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

---

I don't know about the performance on this but you could tell all elements to stop and go to end, as opposed to only the current 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");         
    }); 
});

---

You could try to call stop(true,true) - this will clear the effect queue and skip to the end of currently running animation. Read more about it here