jQuery动画一个火柴人跳跃（动画顶部，然后底部）

Question

我正在制作这种游戏。它只是一个棒极了，走路了＃34;在屏幕周围。如果按下＆＃34; up＆＃34;我想添加跳转到它。

这是我的代码（没有跳转）：

$(document).ready(function () {
            var sitting = $('#sitting'),
                image = $('#img');
            sitting.hide();
            $(document).keydown(function (e) {
                var keyCode = e.keyCode || e.which,
                    arrow = {
                        left: 37,
                        up: 38,
                        right: 39,
                        down: 40,
                        space: 32
                    };
                switch (keyCode) {
                case arrow.left:
                    if (!sitting.is(':visible')) {
                        image.add(sitting).stop(true).animate({
                            left: '-=60px'
                        }, 300, "linear");
                    }
                    break;
                case arrow.up:
                    break;
                case arrow.right:
                    if (!sitting.is(':visible')) {
                        image.add(sitting).stop(true).animate({
                            left: '+=60px'
                        }, 300, "linear");
                    }
                    break;
                case arrow.down:
                    break;
                case arrow.space:
                    image.fadeToggle(-100, function () {
                        sitting.fadeToggle(-100);
                    });
                    break;
                }
            });
            $('#sit').click(function () {});
        });

出于常识，我使用了排队的动画并做了这个（我只减少了案例arrow.up因为它是唯一的相关部分）：

case arrow.up:
                    if (!sitting.is(':visible')) {
                        image.animate({
                            top: '+=10px'
                        }, 200, "linear");
                        image.animate({
                            bottom: '+=10px'
                        }, 200, "linear");
                    }
                    break;

出于某种原因，它无法正常工作。什么都有。这是jsBin

Answer 1

的 LIVE DEMO

var sitting = $('#sitting'),
    image = $('#img'), // COMMA HERE 
    jumping = false ;  // ADD THIS 

并修改：

    case arrow.up:
    if (!sitting.is(':visible') && jumping===false) {
        jumping = true;
        image.stop().animate({
            top: '-=150px'
        }, 200, "linear", function(){
          $(this).animate({top: '+=150'}, 300,'linear', function(){
             jumping = false;
          });                 
        });
    }
    break;