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());
    }
});

如果正在进行中禁用动画

3 个答案: