javascript - jquery，将鼠标悬停在父级上，滑动切换子级，效果不太好

Question

因此，当用户将鼠标悬停在 div(#cart-quick-view) 上时 child(.cart_details_box) 需要向下滑动，并在鼠标离开父级时向上滑动( #购物车快速查看)。这段代码的问题是，有时当鼠标位于 child(.cart_details_box) 区域时，我会得到 2-3 次额外的弹跳。

fiddle : 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