如果mouseleave函数仍处于活动状态，则阻止jquery事件

我有一个div的列表，它在鼠标输入/离开时触发一个函数。我试图阻止其他div触发其enter函数，直到最后一个输入的div完成其离开函数。当前，当输入“悬停”多个div时，会立即触发其所有功能。在此方面的任何帮助/支持都将不胜感激，谢谢

JS

  project.mouseenter(function() {
    var position = project_position++;
    var colourDuration = 1000, colourDelay = 500;
    $(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
  });
  project.mouseleave(function() {
    var position = project_position++;
    var colourDuration = 1000, colourDelay = 500;
    $(this).find('.colour-block').velocity({left:0},{duration: colourDuration, delay: colourDelay});
  });

HTML

        <!-- Project (1) -->
        <div class="project xxx">
          <div class="colour-block"></div>
          <div class="content-block">
            <div class="center-vertically">
              <h2><a href="project.html">xxx</a></h2>
              <p><a href="project.html">Morbi scelerisque id ante vulputate cursus.</a></p>
              <button>&#8594;</button>
              <ul>
                <li><a href="#" title="Brand">Brand</a></li>
                <li><a href="#" title-="Digital">Digital</a></li>
                <li><a href="#" title="Graphic">Graphic</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Project (2) -->
        <div class="project xxx">
          <div class="colour-block"></div>
          <div class="content-block">
            <div class="center-vertically">
              <h2><a href="project.html">xxx</a></h2>
              <p><a href="project.html">Morbi scelerisque id ante vulputate cursus.</a></p>
              <button>&#8594;</button>
              <ul>
                <li><a href="#" title="Brand">Brand</a></li>
                <li><a href="#" title-="Digital">Digital</a></li>
                <li><a href="#" title="Graphic">Graphic</a></li>
              </ul>
            </div>
          </div>
        </div>
        <!-- Project (3) -->
        <div class="project xxx">
          <div class="colour-block"></div>
          <div class="content-block">
            <div class="center-vertically">
              <h2><a href="project.html">xxx</a></h2>
              <p><a href="project.html">Morbi scelerisque id ante vulputate cursus.</a></p>
              <button>&#8594;</button>
              <ul>
                <li><a href="#" title="Brand">Brand</a></li>
                <li><a href="#" title-="Digital">Digital</a></li>
                <li><a href="#" title="Graphic">Graphic</a></li>
              </ul>
            </div>
          </div>
        </div>

→






→






→

---

可能是您可以使用一个标志来防止mousenter触发。

创建动画堆栈数组，并使用velocity completion callback检查堆栈中是否有要设置动画的内容。或者在输入新元素时取消先前的动画，那么堆栈数组将是最好的方法。下面的两个答案都不是经过深思熟虑的，我该如何开发堆栈阵列呢？你知道这方面的任何文档吗？我已经实现了这一点，但是当你将鼠标悬停在下一个div上时，它不会触发事件，直到你将鼠标悬停在div上。你有mouseenter和mouseleave事件，使用velocity.js来做一些动画，你是否需要mouseenter动画只有在mouseleave动画完成后才执行？

var hasEntered=false;

project.mouseenter(function() {
    if(!hasEntered){    
        var position = project_position++;
        var colourDuration = 1000, colourDelay = 500;
        $(this).find('.colour-block').velocity({left:'100%'},{duration: colourDuration, delay: colourDelay});
        hasEntered=true;
    }
});
project.mouseleave(function() {
    if(hasEntered){
        var position = project_position++;
        var colourDuration = 1000, colourDelay = 500;
        $(this).find('.colour-block').velocity({left:0},{duration: colourDuration, delay: colourDelay});
        hasEntered=false;
    }
});