如何延迟toggleClass事件以防止垃圾邮件更改？

Question

我已经使用jQueryUI toggleClass延迟功能，但是我意识到它会在事件发生之前创建一个延迟，而不是设置一段时间才能再次激活。

我有几个DIV在使用toggleClass方法进行悬停时在类之间切换。但是，如果光标在其上快速移动，它们会保持交换状态，并且看起来有问题。我想通过也许允许切换每1秒发生一次或什么来防止这种情况。

这可能吗？

$(".landingImage").hover(function() { 
 
      var curHeight = this.clientHeight; 
 
      $(this).siblings('.imageCover').css("height", curHeight/1.25); 
 
      $(".leftLanding").toggleClass("extraMargin"); 
 
      $(".rightLanding").toggleClass("extraMargin"); 
 
      $(this).siblings(".imageCenter").fadeOut(50); 
 
     }, function() { 
 
      $(this).siblings('.imageCover').css("height", "0px"); 
 
      $(this).siblings(".imageCenter").fadeIn(600); 
 
    });

#landing-images { 
 
     position: relative; 
 
     width: 100%; 
 
     height: auto; 
 
     overflow: auto; 
 
     margin-top: 6%; 
 
     margin-bottom: 5%; 
 
    } 
 
    
 
    .leftLanding { 
 
     display: flex; 
 
     position: relative; 
 
     width: 85%; 
 
     margin-left: 3%; 
 
     cursor: pointer; 
 
     transition: all 0.5s ease; 
 
    } 
 
    
 
    .rightLanding { 
 
     display: flex; 
 
     position: relative; 
 
     width: 85%; 
 
     margin-right: 3%; 
 
     cursor: pointer; 
 
     transition: all 0.5s ease; 
 
    } 
 
    
 
    .extraMargin { 
 
     margin-left: 12%; 
 
     margin-right: 12%; 
 
    } 
 
    
 
    .landingImage { 
 
     position: relative; 
 
     display: block; 
 
     width: 100%; 
 
     height: auto; 
 
     z-index: 90; 
 
     transition: all 0.5s ease; 
 
    } 
 

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="landing-images"> 
 
     <a href="menu.html"><div class="leftLanding left"> 
 
      <div class="imageCover"> 
 
      </div> 
 
      <div class="imageCenter"> 
 
       
 
      </div> 
 
      <img class="landingImage" src="assets/landingIMG1.png"> 
 
     </div></a> 
 
     <a href="contact.html"><div class="rightLanding right"> 
 
      <div class="imageCover"> 
 
      </div> 
 
      <div class="imageCenter"> 
 
       
 
      </div> 
 
      <img class="landingImage" src="assets/landingIMG3.png"> 
 
     </div></a> 
 
     <a href="burritos.html"><div class="leftLanding left"> 
 
      <div class="imageCover"> 
 
      </div> 
 
      <div class="imageCenter"> 
 
      
 
      </div> 
 
      <img class="landingImage" src="assets/landingIMG2.png"> 
 
     </div></a> 
 
    </div>

Answer 1

如果要有条件延缓hover事件，可以延迟使用window.setTimeout的动作。

这个想法是，你 - 设置更改等待一会儿 - 设置鼠标的行为取消挂起的更改。

该代码会做类似的东西：

var delay; 
$(".landingImage").hover(function() { 
    window.setTimeout(doit,250); // queue action 
}, function() { 
    cancel(); // clear hover, if still pending 
    $(this).siblings('.imageCover').css("height", "0px"); 
    $(this).siblings(".imageCenter").fadeIn(600); 
}); 

function doit() { 
    var $landingImage=$(".landingImage"); 
    var curHeight = $landingImage.clientHeight; 
    $landingImage.siblings('.imageCover').css("height", curHeight/1.25); 
    $(".leftLanding").toggleClass("extraMargin"); 
    $(".rightLanding").toggleClass("extraMargin"); 
    $landingImage.siblings(".imageCenter").fadeOut(50); 

    delay=undefined; 
} 
function cancel() { 
    if(delay) delay=window.clearTimeout(delay); 
} 

因为setTimeout是window方法，this不再有效。在这里我已经为原始元素设置了一个变量。我通常用$加上jQuery变量的前缀，但这只是一个口味问题。

当然，我还没有在您的环境中进行过测试。

至于这样做的CSS方式：

如果你想避免瞬间的变化，您可以添加以下到你的CSS：

transition-delay: .25s; 

或任何适合你。

transition-delay也可与一般transition财产（把它放在最后）合并，但先试试这个，看看它是如何工作的。