使用这个简单的jQuery fadeOut()示例的建议

Question

基本上，当某人浏览他们的购物车摘要时，我想显示一个包含更详细信息的div。

下面是一个工作的JSFiddle：

http://jsfiddle.net/5JgZp/

Javascript

    $('#shopping-cart').mouseenter(function () {
        $('#shopping-cart-preview').fadeIn();
    });

    $('#shopping-cart').mouseleave(function () {
        $('#shopping-cart-preview').fadeOut();
    });

<div id="user-information">
    <div id="shopping-cart">
        <img src="@Url.Content("~/Public/images/shoppingcart.png")" alt="shopping cart" />
        <p>Products in Shopping Cart: <span class="cart-item-count">2</span> <span class="cart-subtotal">(<span class="cart-subtotal-value">25,54</span>$)</span></p>

        <div id="shopping-cart-preview">
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
            <p>This is a test.</p>
        </div>
    </div>

    <div id="action-buttons">
        <a class="loginbutton" href="#">LOGIN</a>
        <a class="registerbutton" href="#">REGISTER</a>
    </div>
</div>

#user-information #shopping-cart {
    float: left;
    position: relative;
    cursor: pointer;
}

CSS

#user-information #shopping-cart img {
    float: left;
}

#user-information #shopping-cart p {
    color: White;
    display: inline;
    float: left;
    font-family: 'Open Sans',sans-serif;
    font-size: 12px;
    margin-left: 14px;
    margin-top: 10px;
}

#user-information #shopping-cart p span.cart-subtotal {
    color: #CFE91A;
    margin-left: 11px;
}

#user-information #shopping-cart #shopping-cart-preview {
    background-color: White;
    display: none;
    left: 0;
    outline: 1px solid cyan;
    overflow: hidden;
    position: absolute;
    top: 44px;
    width: 320px;
}

#user-information #shopping-cart #shopping-cart-preview p {
    margin: 0;
    color: Black;
}

#user-information #action-buttons {
    float: right;
    margin-right: 12px;
    margin-top: 3px;
}

JSFiddle示例的工作方式与我想要的完全一样，只有当我将鼠标从购物车摘要移动到弹出的购物车预览窗格时，fadeOut()事件就会被触发，然后fadeIn()事件就会被触发。所以我们陷入了进退两难的困境

当我移动鼠标输入摘要时，我希望窗格不移动。

你有什么建议？

另一个问题是，当我快速地移动鼠标时，动画似乎是排队并执行的。这意味着，即使在我移动鼠标之后，元素也可能会多次出现/退出。有什么建议吗？

编辑

所以我试着做这样的事情：“如果他们在外面点击，就隐藏预览。”

$('#wrapper').click(function () {
    if ($(this) != $('#shopping-cart')) {
        $('#shopping-cart-preview').fadeOut();    
    }
});

但是，即使在预览中单击时，也会调用调用的fadeOut()。我肯定我的条件陈述有问题。有什么建议吗？

编辑2:

用你们的一些想法找出答案。:)

你是怎么做到的：

$('#shopping-cart').mouseenter(function () {
    $('#shopping-cart-preview').stop(true, true).fadeIn();
});

$('#shopping-cart').mouseleave(function () {
    $('#shopping-cart-preview').delay(2000).fadeOut();
});

$('#shopping-cart-preview').mouseenter(function () {
    $(this).stop(true, true).show();
});

Answer 1

我想出了这个解决方案，不确定它是否足够，但请试试看；

$('#shopping-cart')
    .mouseenter(function() {
        $('#shopping-cart-preview').fadeIn();
    })
    .mouseleave(function() {
        $('#shopping-cart-preview').delay(500).fadeOut();
    });

$('#shopping-cart-preview').mouseenter(function() {
        $(this).stop(true).show();
    })
    .mouseleave(function() {
        $(this).delay(500).fadeOut();
    });

Answer 2

我在thecl.com的导航方面也遇到了同样的问题

我的解决方案是使用http://cherne.net/brian/resources/jquery.hoverIntent.html，它提供了一个延迟，允许用户在div中鼠标，使其保持打开状态。

Answer 3

演示Fiddle

更改在Jquery代码中：

$('#shopping-cart').mouseenter(function() {
    $('#shopping-cart-preview').stop().fadeIn();
});
$('#shopping-cart').mouseleave(function() {
    $('#shopping-cart-preview').fadeOut();
});

另外，我建议让购物车预览div出现在购物车摘要div下面。如果用户将鼠标从摘要div移动到预览div的速度较慢，这将消除丢失预览div的问题。不过，我想没人会这么慢。

编辑：

新演示Fiddle

用户现在可以缓慢地从摘要div移动到预览div。没有一个超时不触发淡出，直到1秒的鼠标保存。你可以把1秒改为任何东西。

新法典：

$('#shopping-cart').mouseenter(function() {
    $('#shopping-cart-preview').stop().fadeIn();
});
$('#shopping-cart').mouseleave(function() {
    setTimeout(function(){$('#shopping-cart-preview').fadeOut();},1000);
});