スパムの変更を防ぐためにtoggleClassイベントを遅延させる方法はありますか？

Question

私はjQueryUIのtoggleClass遅延関数を使用しましたが、イベントが発生する前に遅延を作成することに気付きました。

私は、toggleClassメソッドを使用して上に移動したときにクラス間を切り替えるいくつかのDIVを持っています。しかし、カーソルがそれらの上をすばやく移動すると、それらは入れ替えを続けるので、それはバギーに見えます。私はおそらく、1秒に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を使用してアクションを遅らせることができます。

- 変更を保留にするように設定している間に、 - 保留中の変更を取り消すようにマウスの動作を設定します。

このコードはそれのような何かを行います：setTimeoutがwindow方法である

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

ので、thisは、もはや有効ではありません。ここでは元の要素に変数を設定しました。私は一般に、$でjQuery変数の接頭辞を付けますが、それは味の問題です。

私はあなたの環境ではテストしていません。あなたがインスタント変更を回避したい場合、あなたはあなたのCSSに以下を追加することができます

：

transition-delay: .25s; 

またはものは何でもあなたにぴったりの

としてはそれをCSSの道をやって考えています。

transition-delayも、一般的なtransitionプロパティと組み合わせることができますが、これを最初に試してみてください。