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

Question

我正在做这种游戏。它只是一个在屏幕上“走动”的火柴人。如果您按“向上”，我想添加跳转。

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

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

出于常识，我使用了排队动画并做到了这一点（我减少到只有 case 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;