jQuery issue with hoverIntent and show hide for div

问题

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).

The minicart div display is triggered by two events:

HOVER: When user hovers over a container div (using hoverIntent plugin)
CLICK: When an item is added to the cart

The code for 1 is:

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

The code for 2 is:

// 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();
    });
});

The HTML:

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

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.

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!

回答1:

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

来源：https://stackoverflow.com/questions/4666227/jquery-issue-with-hoverintent-and-show-hide-for-div

标签

jquery

html

hoverintent