Question

我有一个div列表，鼠标进入/离开触发一个函数。我试图阻止其他div触发其输入功能，直到最后输入的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>

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

可能是您可以使用标志来阻止鼠标中心触发。

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

1 个答案: