Question

so i’m setting up a little jquery animation where the user hovers over a container for a certain amount of time, which causes the container to split over and then reveal information inside.

i don’t want the animation to begin as soon as the mouse enters the container, so I put a delay() on the animate. now the animation won’t start right away.

however, there is an issue. if you quickly hover over the area, the animation begins and starts really fast.

here is a jsfiddle to illustrate…
http://jsfiddle.net/Rh96d/

i don’t want the animation to play unless the user holds their mouse over the blue area for a certain amount of time. in this example, the animation plays even when the user removes their mouse from the area, which shouldn’t happen.

sorry if i’m not being clear enough. i’m not sure how to get this to work…

Answer 1

I’m a pretty big fan of the jQuery hoverIntent plugin.

Here’s a fiddle implementation.

After including the plugin, your script would change to

function hoverIn () {
    $('#one').stop().animate({marginTop:'-250px'});
    $('#two').stop().animate({marginTop:'500px'});
}
function hoverOut () {
    $('#one').stop().animate({marginTop:'0px'});
    $('#two').stop().animate({marginTop:'0px'});
}
var config = {
    over: hoverIn,
    timeout: 0,
    out: hoverOut,
    interval: 600
};

$('#main').hoverIntent(config);