trying to move box with keys and it is not working

I have a fiddle here: http://jsfiddle.net/maniator/SZpkF/1/

The green box is supposed to move with the arrowkeys. can some one explain why it wont work?

js:

var game = {
    playArea: null,
    player: null,
    init: function() {
        this.playArea = $('<div>', {
            style: 'background-color: #AAF;'
        });
        this.player = $('<span>');
        this.player.css({
            width: 20,
            height: 20,
            'background-color': '#AFA',
            display: 'block',
            position: 'absolute',
            top: 0,
            left: 0
        })
        $(window).resize(game.resize);
        $('body').append(this.playArea);
        this.resize();
        this.playArea.append(this.player);
        $(document).keydown(function(event) {
            game.keydown(event)
        })
        return this;
    },
    resize: function() {
        //console.log('resize', game);
        game.playArea.css({
            width: $(window).width() - 50,
            height: $(window).height() - 50,
        });
        return this;
    },
    keydown: function(event) {
        var direction;
        switch (event.keyCode) {
        case 38:
            direction = {
                'top': '-= 15'
            };
            break;
        case 40:
            direction = {
                'top': '+= 15'
            };
            break;
     开发者_Python百科   case 37:
            direction = {
                'left': '+= 15'
            };
            break;
        case 39:
            direction = {
                'left': '-= 15'
            };
            break;
        }
        console.log(direction, event, game.player);
        game.player.animate(direction, 'slow');
    }
};

$(function() {
    game.init();
})

Doesn't look like jQuery likes spaces after the -= and +=. I removed those and it worked, albeit with the directions reversed.