javascript - Jquery Animate - 使元素只弹跳一次

Question

我有一个盒子.child。我想让这个盒子跳起来，然后在按下向上键时回到原来的位置。我有以下脚本:

$(document).on('keydown', function( e ){
    if ( e.keyCode === 38 ) {
        $('.child').animate({ 
            'bottom' : '50px'
        }, 250).animate({
            'bottom' : '0px' 
        }, 250);
    }
});

现在，当按下向上键时，它确实使元素反弹。但是，如果我一次又一次地按下向上键，即使没有按下键，它也会让盒子一次又一次地跳跃。现在我知道了 queue 所以我尝试了以下操作:

$(document).on('keydown', function( e ){
    if ( e.keyCode === 38 ) {
        $('.child').animate({ 
            'bottom' : '50px'
        }, {
            duration: 250,
            queue: false
        }).animate({
            'bottom' : '0px' 
        }, {
            duration: 250,
            queue: false
        });
    }
});

但它也没有按预期工作。然后我想将 queue : false 添加到第二个动画中，但仍然没有用。谁能告诉我如何让元素跳一次而不是重复跳？

在这里 fiddle :http://jsfiddle.net/duwtbux0/

Answer 1

只需添加某种标志来阻止输入被接受。

var acceptingInput = true;
$(document).on('keydown', function( e ){

    if(acceptingInput){
        if ( e.keyCode === 38 ) {
            acceptingInput = false;
            $('.child').animate({ 
                'bottom' : '50px'
            }, 250).animate({
                'bottom' : '0px' 
            }, 250, function() {
                acceptingInput = true;
            });
        }
    }
});

fiddle :http://jsfiddle.net/duwtbux0/2/