Question

I’m working on a simple slide out tab.

This script causes a div – ‘#slideout’ to slide in when the mouse is over ‘#tabFeature1’, and slide out on mouseout.

All is working except for an unwanted side effect. If effect stacks – so each mouseover/mouseout is stacked. For instance, if the user moves the mouse in and out 10 times quickly, then stops moveing the mouse, the animation will continue to itterate – in and out, 10 times. The disired effect is that the animation would not stack. Please let me know if that makes sense.

$(document).ready(function () {
    $('#tabFeature1').mouseover(function () {
            $('#slideout').show("slide", { direction: "left" }, 1000);
        });

    $('#tabFeature1').mouseout(function () {
            $('#slideout').hide("slide", { direction: "left" }, 1000);
    });
});

Answer 1

Check to see if the animation is still in progress with .is(':animated'), and apply the animation if the previous one is completed.

$(document).ready(function () {
    $('#tabFeature1').mouseover(function () {
            if (!$('#slideout').is(':animated')) {
                $('#slideout').show("slide", { direction: "left" }, 1000);
            }
        });

    $('#tabFeature1').mouseout(function () {
            if (!$('#slideout').is(':animated')) {
                $('#slideout').hide("slide", { direction: "left" }, 1000);
            }
    });
});