Question

How do I make this script disable animation if it’s already animating?

<script type="text/javascript">
    $(document).ready(function() {
        $("#nav").hover(
            function() {
                $("#header-wrapper").animate({height:140},500);
                $("#dropdown").animate({height:100},500);
            },
            function() {
                $("#header-wrapper").animate({height:40},500);
                $("#dropdown").animate({height:0},500);
            }
        );
    });
</script>

I’m really new to jQuery and what I’ve found through searching hasn’t really helped.

Answer 1

Use .stop()

    $("#nav").hover(
        function() {
            $("#header-wrapper").stop(true,false).animate({height:140},500);
            $("#dropdown").stop(true,false).animate({height:100},500);
        },
        function() {
            $("#header-wrapper").stop(true,false).animate({height:40},500);
            $("#dropdown").stop(true,false).animate({height:0},500);
        }
    );