Question

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

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

您可以尝试调用stop(true,true) - 这将清除效果队列并跳到当前正在运行的动画的结尾。 Read more about it here

Answer 2

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

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

如果另一个仍在运行，Jquery会停止动画

2 个答案: