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

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