How to ignore mouse activity until function completes

Question

I use the following code to slide out a div on a mouse-over, wait a couple of seconds and slide the div back.

$(document).ready(function()
    {$("#divider").mouseover(function () 
     {$("#slider").show("slide", {direction: "left"}, 1000).pause(2000).hide("slide", {direction: "left"}, 1000);}
    );}
);

I'm sure this is simple, but I have limited Javascript/jQuery knowledge. How do I make it so any mouse activity on the trigger is ignored until the animation completes? Right now, if while the div is open you mouse over the trigger area it "remembers" and plays the animation for as many times as you've moved the pointer through the trigger area. Page

Answer 1

The question has changed... I defer to millsJROSS's answer.

Answer 2

Swizzle out the event handler (not sure if this works, but something along these lines):

var omo = function() {
    {$("#divider").mouseover(function () {});}
    slide();
}

var slide = function() {
    {$("#slider").show("slide", {direction: "left"}, 1000)
        .pause(2000)
        .hide("slide", {direction: "left"}, 1000);
    }
    {$("#divider").mouseover(omo);}
}

$(document).ready(function()
    {$("#divider").mouseover(omo);}
);

Answer 3

I'd suggest removing the event from your divider until the animation is finished, than using the hide callback function to add that event handler back in.

$(document).ready(function() {
    function divider_mouseover() {
        $('#divider').unbind('mouseover');

        $("#slider")
           .show("slide", {direction: "left"}, 1000)
           .pause(2000)
           .hide("slide", {direction: "left"}, 1000, function() {
               $("#divider").mouseover(divider_mouseover);
           });
    };

    $("#divider").mouseover(divider_mouseover);
};

Answer 4

Don't bind and unbind and rebind instead use a flag to decide if you should care about the event.

$(document).ready(function(){
    $("#divider").mouseover(function(){
        var $this = $(this);
        if($this.data('nomouse')) return;
        $this.data('nomouse',true);
        $("#slider")
        .show("slide", {direction: "left"}, 1000)
        .pause(2000)
        .hide("slide", {direction: "left"}, 1000, function() {
            $this.data('nomouse',false);
        });
    });
});

Binding and unbinding was of one Paul Irish's jQuery Anti-Patterns in the yayQuery podcast