Javascript 使用这个简单jQuery fadeOut（）示例的建议

基本上，当有人将鼠标移到他们的购物车摘要上时，我希望显示一个包含更详细信息的div

下面是一个正在工作的JSFIDLE：

Javascript

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

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

HTML

<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;
}

JSFIDLE示例的工作方式正是我所希望的，但当我将鼠标从购物车摘要移动到弹出的购物车预览窗格时，会触发fadeOut（）事件，然后立即触发fadeIn（）事件。因此，我们陷入了“淡出-淡出”困境

当我向下移动鼠标进入摘要时，我希望窗格不会消失

你有什么建议

另一个问题是，当我快速地将鼠标移入移出时，动画似乎已排队并执行。这意味着即使在我移动完鼠标后，元素也可能会褪色/消失很多次。建议

---

编辑：

所以我在尝试这样的事情；“如果在预览之外单击，则隐藏预览。”

但是，即使在预览中单击，调用的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();
});

---

试试这个-我已经将购物车预览div移到了购物车div之外，并简化了jquery代码->

我在cl.com的导航上也遇到了同样的问题

我的解决方案是使用，它提供了一个延迟，允许用户将鼠标放在div中，从而使其保持打开状态。

更改发生在Jquery代码中：

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

此外，我还建议将购物车预览div显示在购物车摘要div的正下方。如果用户在将鼠标从摘要div移动到预览div时速度较慢，这将消除丢失预览div的问题。不过，我认为没有人会这么慢

编辑：

用户现在可以缓慢地从summary div移动到preview div。没有一个超时不会触发淡出，直到鼠标移动1秒之后。您可以将1秒更改为任何其他时间

新代码：

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

---

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

$('#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();
    });

---

在您的小提琴上，将鼠标悬停在购物车预览div上会使其消失。我认为如果你在该分区中提供链接，那将是不好的。它们将不可点击。这仍然有同样的问题。@xbonez:是的，事实上。我将在这个预览分区中添加一个指向签出的链接，因此它必须保持打开状态，并允许人们在其中单击。啊，很公平。使用这样的工具提示插件怎么样？或者使用预发行版1.9 jQuery UI工具提示库。引入工具提示的1.9里程碑已经发布了1.5年，因此现在可能会更稳定一些您可能会获得最新的1.9里程碑，它将包含工具提示小部件。请尝试将鼠标多次移动到

#shopping cart

div上。它最终会出错。+1表示一个很好的问题和一些很好的编写代码，而-1表示糟糕的和未配对的小提琴：

$的不可原谅的重复。stop（true）

可能正是您要找的东西！：）你知道吗，这100%地解决了我想要的问题。干净的代码，没有对libs的外部依赖，这只是一个很好的解决方案。谢谢你的帮助。：）我不知道你能。延迟！但是，仍然存在一个问题，如果将鼠标移入和移出事件登录区域，预览div最终会出错：/阅读jquery队列（）。我相信这会解决“最终出问题”的问题

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

$('#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();
    });