jQuery要素からslideToggleキューを削除する

Question

jQueryを初めて使用していて、別の要素を上に飛び越すためのホバーslideToggleを実装しようとしています。しかし、すべてが正常に機能しますが、エンド・ユーザーがカーソルを素早く要素の内外に置くと、slideToggleキューはカーソルが要素に入った回数だけアニメーションを継続します。私は同じコードを使用する複数の要素をインラインで持っていますが、ただ1つの要素でも状況は続きます。 .stop（）と.clearQueue（）の両方を試しましたが、おそらく私はそれらを間違って配置しています。私はまた、HTML要素が存在する場合、トグルをロックするコンピュータ上にないユーザのためのクリック要素を持っています。これが正気であるかどうかは分かりません。助けてくれてありがとう！

HTML：

<div class="Holder"> 
    <div class="Popout" val="0"> 
    <span hidden>0</span> 
    </div> 
</div> 
<div class="Holder"> 
    <div class="Popout" val="0"> 
    <span hidden>0</span> 
    </div> 
</div> 

CSS：

.Holder{ 
    position: relative; 
    display:-moz-inline-stack; 
    display:inline-block; 
    width:155px; 
    height:400px; 
    border-style: solid; 
    border-width:1px; 
    vertical-align:top; 
    top:0; 
} 

.Popout{ 
    height:100%; 
    width:100%; 
    background-color:black; 
    position:absolute; 
    display: none; 
    left:0; 
    bottom:0; 
} 

のjQuery：ここ

$('.Holder').hover(
    function(){ 
     if ($('.Popout > span',this).html() == 0){ 
      $('.Popout',this).slideToggle('slow'); 
     } 
    }, 
    function(){ 
     if ($('.Popout > span',this).html() == 0){ 
      $('.Popout',this).slideToggle('slow'); 
     } else if ($('.Popout > span',this).html() == 2){ 
      $('.Popout > span',this).html(0); 
     } 
} 
).click(function(){ 
    if ($('.Popout',this).is(':visible')) { 
     if ($('.Popout > span',this).html() != 1){ 
      $('.Popout > span',this).html(1); 
     }else{ 
      $('.Popout',this).slideToggle('slow'); 
      $('.Popout > span',this).html(2);  
     } 
    }else{ 
     $('.Popout',this).slideToggle('slow'); 
     $('.Popout > span',this).html(1);   
    } 
}); 

ワーキングJsFiddle：https://jsfiddle.net/cn2at071/1/

Answer 1

アニメーションがslideToggleの機能を再開する直前にstop()を入力する必要があります。

JSFiddle：https://jsfiddle.net/k9by9q0y/

のjQuery：

$('.Holder').hover(
function(){ 
    if ($('.Popout > span',this).html() == 0){ 
     $('.Popout',this).stop().slideToggle('slow'); 
    } 
}, 
function(){ 
    if ($('.Popout > span',this).html() == 0){ 
     $('.Popout',this).stop().slideToggle('slow'); 
    } else if ($('.Popout > span',this).html() == 2){ 
     $('.Popout > span',this).html(0); 
    } 
} 
).click(function(){ 
    if ($('.Popout',this).is(':visible')) { 
     if ($('.Popout > span',this).html() != 1){ 
      $('.Popout > span',this).html(1); 
     }else{ 
      $('.Popout',this).slideToggle('slow'); 
      $('.Popout > span',this).html(2);  
     } 
    }else{ 
     $('.Popout',this).slideToggle('slow'); 
     $('.Popout > span',this).html(1);   
    } 
});