Question

因此，当用户将鼠标悬停在div(#cart-quick-view) child(.cart_details_box)上时需要使用slideDown，当鼠标离开父级时（＃cart-quick-view）需要使用slideUp。这段代码的问题在于，当鼠标位于child(.cart_details_box)区域时，有时候我会得到2-3次额外的弹跳。

小提琴： http://jsfiddle.net/Y9QLC/

HTML：

<div id="cart-quick-view">
    <ul class="nav navbar-nav navbar-right">
        <li>...</li>
    </ul>
    <div class="cart_details_box"></div>
</div>

CSS：

#cart-quick-view {
    float: right;
    position: relative;
    border: 1px solid black;
 }
 .cart_details_box {
    display: none;
    position: absolute;
    height: 200px;
    width: 205px;
    background-color: #F8F8F8;
    border-radius: 5px;
    border:1px solid #E7E7E7;
    padding: 0px 3px 3px 3px;
    top: 55px;
    right: 0;
 }

JS：

$(function() {
    $('#cart-quick-view').hover(function() { 
        $('.cart_details_box').slideToggle('slow');
    });
});

Answer 1

这是因为当鼠标快速进入和离开父元素时，动画排队。您可以使用.stop(true, true)清除现有动画来修复它

$(function () {
    $('#cart-quick-view').hover(function () {
        $('.cart_details_box').stop(true, true).slideToggle('slow');
    });
});

演示：Fiddle

Answer 2

stop()方法是一个选项，但还有一个名为hoverFlow的jQuery插件可以通过更好看的过渡解决问题。

jquery，悬停在父级，slideToggle的孩子，不能很好地工作

2 个答案: