javascript - 如果另一个仍在运行，则 Jquery 停止动画

Question

我尝试在悬停元素上显示和隐藏元素。我的代码有效，但是当用户鼠标悬停和 mouseout 元素非常快时，动画运行并运行甚至 mouseout :(

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

和 HTML:

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

Answer 1

我不知道这方面的性能，但你可以告诉所有元素停止并结束，而不是只告诉当前元素。

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