JQuery .show().hide() 不让 CSS 悬停代码正常工作

Question

在此jsFiddle ，尽管 jQuery 文档说 .show() 将 CSS 属性恢复为原来的样子，但一旦调用 .show(x).delay(x).hide(x)，CSS 悬停代码就会停止工作:

Javascript:

$('.product').on('click', function(){
    $('.drawer').html("Something in your basket")
        .show(200).delay(500).hide(200);
});

CSS:

.drawer {
    border: 1px solid black;
    padding: 10px;
    position: absolute;
    top: 20px;
    left: 0px;
    display: none;
    width: 200px;
} 
.basket {
    position: relative;
}
.basket:hover .drawer {
    display: block;
}

HTML:

<div class="basket">
    <a href="#">Basket</a>
    <div class="drawer">No items in your basket</div>
</div>
<br/><br/><br/><br/><br/><br/>
<a href="#" class="product">Add X to basket</a>

这是怎么回事？到目前为止我只在 Firefox 中测试过

Answer 1

jQuery 确实表示，当您调用 .show() 时，它将恢复 CSS 属性，但不会 .hide()。

documentation for .hide()说:

This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value.

如果先 .hide() 和元素，然后 .show() 它，jQuery 将尝试恢复元素的原始显示值。但是，在您的情况下，您按 .show(x).delay(x).hide(x) 的顺序调用，其中 .hide() 是最后调用的函数它不会恢复任何值，而只是在元素上应用 .css("display", "none") (并在调用 .show() 时保存一个值)之后)。顺序很重要。

因此在这种情况下您应该使用完整的回调函数来删除显示属性。

$('.product').on('click', function(){
    $('.drawer').html("Something in your basket")
        .show(200).delay(500).hide(200, function() {
            $(this).css("display", "");
        });
});

和it should work fine now .