Question

I don’t know how to best explain this, and I’m sure my title doesn’t do the job. Here is the problem. I need to build a pullout on the side of the page. When you hover over the tab, it pulls out from the left. When you unhover, it moves back to it’s original position. That all works great except for one annoyance. If you scrub your mouse on and off the div quickly, it queues up multiple .animate functions, leaving the tab to pop in and out multiple times. Here is the site with the annoyance as of the time of writing: http://mattandjentry.com/weddings/

Here is my jquery:

$(document).ready(function() {
    $("#session_pullout").css("left", "-370px"); 

    $("#session_pullout").hover(function() {
        $("#session_pullout").animate(
                {"left": "-50"},
                "fast");
        }, function(){
            $("#session_pullout").animate(
                {"left": "-370px"},
                "fast");
        });
});

Answer 1

Yet another .stop() question.

Use .stop() to stop the currently-running animation. Optionally, you can call .stop(true) clear the animation queue as well; or, .stop(true, true) to on top of clearing the animation queue to jump to the end of the animation.

$(document).ready(function () {
    $("#session_pullout").css("left", "-370px");

    $("#session_pullout").hover(function () {
        $("#session_pullout").stop().animate({
            "left": "-50"
        }, "fast");
    }, function () {
        $("#session_pullout").stop().animate({
            "left": "-370px"
        }, "fast");
    });
});

Take a look at the parameters of .stop() and see which better fits your need.