jquery - 使用 JQuery 制作动画

Question

我正在尝试使用 JQuery 为对象设置动画，以便当您使用箭头键时它会移动。

    $(document).ready(function() {
$(document).keydown(function(key) {
    switch(parseInt(key.which,10)) {
        case 65:
            $('img').animate({left: "-=10px"},500);
            break;
        case 83:
        $('img').animate({top:"+=10px"},500);
            break;
        case 87:
        $('img').animate({up:"-=10px"},500);    
            break;
        case 68:
        $('img').animate({right:"-=10px"},500);
            break;
        default:
            break;
    }
});
});

这是我的图像代码，但它不起作用。您是否立即注意到任何看起来不对劲的地方？

Answer 1

key.which 已经是一个整数了，不需要解析，而且数字是错误的，CSS 属性也是如此，没有 up 这样的东西，还有 top 和 这样的 CSS 属性left 对静态元素没有影响，因此您必须添加一个位置:

$(document).ready(function () {
    $(document).keydown(function (key) {
        switch (key.which) {
            case 37:
                $('img').animate({
                    left: "-=10px"
                }, 500);
                break;
            case 40:
                $('img').animate({
                    top: "+=10px"
                }, 500);
                break;
            case 39:
                $('img').animate({
                    left: "+=10px"
                }, 500);
                break;
            case 38:
                $('img').animate({
                    top: "-=10px"
                }, 500);
                break;
            default:
                break;
        }
    });
});

FIDDLE