Removing slideToggle Queue from jQuery Element

Question

I am new to jQuery and am trying to implement a hover slideToggle to popout over another element. Everything works fine, however, if the end user places their cursor in and out of the element quickly, the slideToggle queue continues the animation as many times as their cursor has entered the element. I also have multiple elements inline that use the same code, although even with just a single element, the situation persists. I have tried both .stop() and .clearQueue(), although maybe I am placing them incorrectly. I also have a click element for users not on a computer that locks the toggle if an html element exists. Not sure if this is kosher though. Thanks for the help!

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

Working JsFiddle Here: https://jsfiddle.net/cn2at071/1/

Answer 1

You need to put stop() just before animation starts again with slideToggle function.

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