Question

基本上，当某人将鼠标放在他们的购物车摘要上时，我想显示一个包含更多详细信息的div。

这是一个有效的JSFiddle：

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

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

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

我的解决方案是使用http://cherne.net/brian/resources/jquery.hoverIntent.html，它会延迟允许用户将鼠标放在div中以保持打开状态。

Answer 2

我提出了这个解决方案，不确定是否足够，但请试一试;

$('#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 3

<强> Demo Fiddle

更改在Jquery代码中：

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

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

编辑：

<强> New Demo Fiddle

用户现在可以从摘要div移动到预览div。在1秒的mouseleave之后，没有超时不会触发淡出。您可以将1秒更改为其他任何内容。

新守则：

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

Answer 4

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

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

4 个答案: