0

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

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

  1. HOVER：当用户悬停在容器 div 上时（使用 hoverIntent 插件）
  2. CLICK：将商品添加到购物车时

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 显示？

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

4

1 回答 1

1

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

// Show / Hide mini cart on hover
$('#cartWrapper').hoverIntent(function () {
   $("#cartPreviewWrapper").stop(true,true).slideDown('fast');
   },
   function () {
     $("#cartPreviewWrapper").stop(true,true).slideUp('fast');
});
于 2011-01-12T09:40:24.267 回答