jQuery hoverIntent 2 divs interaction delay

Question

I want to display several blocks(divs) and make all of them interact with same object in the same way.

Here is a jsFiddle Demo

---

Steps to simulate the bug

1. Rollover the 1st block this will trigger an animation, it opens the object.
2. Then if you Rollover the second block I want to keep the object open but what happens is that the object 1st closes then opens again.

Objective

Keep the object open while I rollover the blocks

Added the original code for future generations:

$('.object').css({ "top": '-180px' });
$(".cont1,.cont2").hoverIntent(mousein_triger , mouseout_triger);

function mousein_triger(){
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        $('.object').stop().animate({"top": "-180px"}, 1000);
}

Answer 1

I've used a timer (global) here is the jsfiddle : http://jsfiddle.net/zL5jZ/

var timer = false;
function mousein_triger(){
        clearTimeout(timer);
        $('.object').stop().animate({"top": "0px"}, 300);
    }
function mouseout_triger() {
        timer = setTimeout(function(){
            $('.object').stop().delay(1000).animate({"top": "-180px"}, 1000);
        }, 400)
}

after 400ms without hovering a block, the block closes itself, else it stays open as you wish.

am I right ? :)

Answer 2

Explaining why it isn't working ...

The problem is that the 'stop()' will stop the animation if it has already started but won't stop the delay if it is in progress. So if you move out of a box and wait until the blue one starts moving and quickly move back into a box, it will immediately stop the animation. If you move out of a box and right back into a box, it will finish the wait and then finish the entire animation.

To fix it use a timer like @nicolast suggests.