Question

我是jQuery的新手，我正在尝试实现悬停slideToggle以弹出另一个元素。一切正常，但是，如果最终用户将光标快速放入和移出元素，则slideToggle队列会在光标进入元素时多次继续动画。我也有多个内联元素使用相同的代码，虽然即使只有一个元素，情况仍然存在。我已经尝试了.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

您需要在使用stop()函数重新开始动画之前放置slideToggle。

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

从jQuery元素中删除slideToggle Queue

1 个答案: