Question

嗨我每次向购物车添加东西时都会向用户显示一个div（这是一个迷你购物车，会在页面上显示5秒钟，然后消失）。

minicart div显示由两个事件触发：

HOVER：当用户将鼠标悬停在容器div上时（使用hoverIntent插件）
点击：将商品添加到购物车

1的代码是：

// Show / Hide mini cart on hover
$('#cartWrapper').hoverIntent(function () {
   $("#cartPreviewWrapper").stop().slideDown('fast');
   },
   function () {
     $("#cartPreviewWrapper").stop().slideUp('fast');
});

2的代码是：

// When user clicks the add to cart button
$('#purchase').click(function() {  // div will not show fully at times when this is triggered
    // show the minicart div for 5 seconds, then hide 
    $("#cartPreviewWrapper").show().delay(5000).queue(function(n) {

        // I NEED TO ADD SOME CODE HERE 
        // THAT WILL MAKE THE DIV STAY / SHOW
        // IF USER HOVERS OVER IT 

        $(this).hide(); n();
    });
});

HTML：

<div id="cartPreview">
  <div id="cartPreviewTable">
        // cart content
     </div>
</div>

我遇到的一个问题是，当数字2被触发时，div无法正确显示。它有点被卡住了一半并且有时不会一直延伸。注意：div在我的所有其他页面上显示和隐藏hoverIntent没有问题。就在我在用户将商品添加到购物车并且第2号被触发的页面上，这个问题出现了。

而且，有没有人知道如果用户在第二次触发时将鼠标悬停在div上会如何进行div显示？

希望这是有道理的，任何帮助都非常感谢！

Answer 1

我想这是导致此问题的stop()方法，请尝试清除队列：

// Show / Hide mini cart on hover
$('#cartWrapper').hoverIntent(function () {
   $("#cartPreviewWrapper").stop(true,true).slideDown('fast');
   },
   function () {
     $("#cartPreviewWrapper").stop(true,true).slideUp('fast');
});

jQuery问题与hoverIntent和show hide for div

1 个答案: