jquery - HoverOut 上的 SlideDown 和 SlideUp(快速篮)

Question

我有一个快速篮子；当您将鼠标悬停在购物篮链接时出现的结帐框 div。我希望购物篮仅在将鼠标悬停在链接上时出现，并且当用户离开链接时它会消失。

如果用户位于主 div 内并且仅在鼠标滑出时滑出，则该框也应保持静止。

让我痛苦地发布这个，我无法得到它并且已经有一段时间了..

jQuery

// Toggle the Quick Cart (uses Load Balance for higher TPS no que!)
$('#show-quick-cart').hover(function () {        
    $('#quickcart').slideDown(500);
    return false;
});
$('#quickcart').mouseleave(function () {        
    $(this).slideUp(500);
    return false;
});

HTML5

<a id="show-quick-cart" href="#show-quick-cart">MY BAG</a>
<div id="show-quick-cart-zone">
    <div id="quickcart" class="quickcart hide">
        <div class="quickcarttitle"><span>SHOPPING BAG</span></div>
        <div class="quickcart-products">
            <p><strong>No items in your cart so far</strong></p>
            <a href="/cart?ref=quick-cart"><img src="//gc-cdn.com/cart/securecheckout.png"></a>
        </div>
    </div>
</div>

演示

现场演示(页面)

http://tinyurl.com/bwn33op

实际的 jQuery

http://tinyurl.com/cz6kl66

jsFiddle

jsFiddle .

Answer 1

DEMO on JSFiddle

HTML

<div id="pardiv">
<a id="show-quick-cart" href="#show-quick-cart">MY BAG</a>
<div id="show-quick-cart-zone">
    <div id="quickcart" class="quickcart hide">
        <div class="quickcarttitle"><span>SHOPPING BAG</span></div>
        <div class="quickcart-products">
            <p><strong>No items in your cart so far</strong></p>
            <a href="/cart?ref=quick-cart"><img src="//gc-cdn.com/cart/securecheckout.png"></a>
        </div>
    </div>
</div>
</div>​

Jquery

$('#show-quick-cart').mouseenter(function () {        
    $('#quickcart').slideDown(500);
    return false;
});
$('#pardiv').mouseleave(function () {        

    $('#quickcart').slideUp(500);
    return false;
});

​