从jQuery元素中移除slideToggle Queue

Removing slideToggle Queue from jQuery Element

本文关键字：slideToggle Queue jQuery 元素      更新时间：2023-09-26

我是jQuery的新手，我试图实现一个hover 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);           
    }   
});

Working JsFiddle Here: https://jsfiddle.net/cn2at071/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);           
    }   
});
相关文章：