javascript - 从 jQuery 元素中删除 slideToggle 队列

Question

我是 jQuery 的新手，正在尝试实现悬停 slideToggle 以在另一个元素上弹出。一切正常，但是，如果最终用户将光标快速移入和移出元素，则 slideToggle 队列会继续播放动画，次数与光标进入元素的次数一样多。我还有多个使用相同代码的内联元素，尽管即使只有一个元素，情况仍然存在。我已经尝试了 .stop() 和 .clearQueue()，尽管我可能放错了它们。如果 html 元素存在，我还有一个用于不在计算机上的用户的 click 元素，该元素会锁定切换。不确定这是否符合犹太洁食。感谢您的帮助!

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