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

Question

我有一个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});
  });

        <!-- 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>

Answer 1

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;
    }
});

也许你可以用旗子来防止木乃伊着火。