仅针对特定事件限制 Jquery 动画答案

【问题标题】：Restrict Jquery Animation for certain event only仅针对特定事件限制 Jquery 动画
【发布时间】：2015-08-18 15:37:03
【问题描述】：

我有滑动菜单，我使用 mouseover 和 mouseout 方法来触发动画。它正在工作，但是当经常悬停和鼠标悬停时，动画会持续很长时间。我怎样才能将它限制为仅反复播放动画。这是我使用的示例代码。

var slide_speed = 400;
$( ".fos-zoom-div" ).mouseover(function() {
    $(this).animate({
        marginTop: "-40px",
        cursor: "pointer"
     }, slide_speed, function() {

     });
});

$( ".fos-zoom-div" ).mouseout(function() {
    $(this).animate({
        marginTop: "0",
        cursor: "pointer"
        }, slide_speed, function() {

        });
});

【问题讨论】：

您需要将这些函数包装到一个逻辑中，以在动画当前处于活动状态时阻止其他动画开始。您可以通过使用指示正在进行的活动的标志或在动画完成时使用 jquery 引发的事件来做到这一点。
鼠标悬停时停止运行动画：api.jquery.com/stop$(this).stop(true).animate({...});
改用.mouseenter()和.mouseleave()。
感谢 arkascha，它成功了。

标签： javascript jquery jquery-animate

【解决方案1】：

在开始时，当动画即将触发时，您可以使用jQuery is()方法检查元素是否当前正在动画：

$( ".fos-zoom-div" ).mouseover(function() {
   if($(this).is(':animated')){
      return false;
   }
   $(this).animate({
     marginTop: "-40px",
     cursor: "pointer"
     /** ... */

如果元素处于动画状态，返回 false 将不允许 new 动画进入队列。

【讨论】：