Question

I’m using the following code to show a box when you mouseover a certain div and have set the delay on the fade out but is there some way of cancelling the fadeOut effect if the user goes back on to the div?

jQuery("#cart-box").hover(function() 
{
    jQuery("#cart-container").fadeIn('fast');
}, function( )
{
    jQuery("#cart-container").delay(800).fadeOut('fast');
});

Code for the divs

<div class="cart-box" id="cart-box"><a href="#">Cart</a><div class="cart-container" id="cart-container"><div class="cart-contents">contents</div></div></div>

Thinking about it I think it’s probably a case me needing to stop the fadeIn function working if you go away from the div and go back.

Any thoughts would be helpful as still very new to jQuery!

On a side note what effect should I use to have the box expand from nothing to the height of the content instead of just fading in?

Answer 1

There’s a very nice plugin written in jQuery specifically for this type of mouse enter / leave functionality.

It’s called hoverIntent.js

It creates a configurable delay before performing the next slide action etc, great for menu interactions. You can also call your own functions on each of the expiry events.

An example of the default usage is:

$("#menu li").hover( showMenu, fadeMenu)

Whereby fadeMenu and showMenu would be your jQuery functions to change the appearance of the menu.

To create your own configuration of the delay you simply use:

var config = {    
     over: showMenu,  
     timeout: 500, // number = milliseconds delay before fadeMenu is called
     out: fadeMenu 
};

$("#menu li").hoverIntent( config )

Edit:

For you example, so long as the is the trigger to show the hidden div then you should be able to use the following:

var config = {    
     over: showMenu,  
     timeout: 500, // number = milliseconds delay before fadeMenu is called
     out: fadeMenu 
};

$("#cart-box a").hoverIntent( config );

function showMenu() {
    jQuery("#cart-container").fadeIn('fast');
}

function fadeMenu() {
    jQuery("#cart-container").fadeOut('fast');
}