Отключить анимацию, если выполняется

Question

Как сделать так, чтобы этот скрипт отключал анимацию, если она уже анимируется?

<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>

Я действительно новичок в jQuery, и то, что я нашел с помощью поиска, не очень помогло.

Answer 1

Использование .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);
        }
    );

Answer 2

Используйте функцию .stop () jQuery

$("#dropdown").stop().animate({height:0},500);

Answer 3

попробуйте это:

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