带有hoverIntent的jQuery问题并显示div的隐藏 [英] jQuery issue with hoverIntent and show hide for div

问题描述

我有一个div，每次用户向购物车中添加东西时都会显示给用户(这是一个微型购物车，在页面上显示5秒钟，然后消失).

Hi I have a div that I show to users every time they add something to the shopping cart (it's a mini cart that's displayed on the page for 5 seconds, then dissappears).

微型购物车的div显示由两个事件触发:

The minicart div display is triggered by two events:

1. 悬停:当用户将鼠标悬停在容器div上时(使用hoverIntent插件)
2. 点击:将商品添加到购物车中

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号页面时，就会出现此问题.

One issue I am having is that when number 2 is fired the div does not display correctly. It sort of gets stuck half way and does not extend all the way at times. Note: The div shows and hides with no issues with hoverIntent on all my other pages. Just when I'm on the page where users add an item to the cart and number 2 is fired this issue comes up.

而且，有人知道我被第二个数字触发时，如果用户走过并将鼠标悬停在div上，该如何显示div?

And also, does anyone know how I can make the div show if users go and hover over it when triggered by number two?

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

Hope this makes sense and any help greatly appreciated!

推荐答案

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

I guess it's the stop() method that is causing this problem, try to clear the queue:

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

这篇关于带有hoverIntent的jQuery问题并显示div的隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！