jquery - 仅在按键按下时运行 CSS 转换 - jQuery

Question

我有以下 jQuery 代码:

$(document).ready(function(){
    var pane = $(document),         
        box = $("#hero"),               //Our character
        w = pane.width() - box.width(), //Width
        d = {},                         //Empty object
        angle = 0;


        var newr = function(a, b){
            return (a == 37) ? angle += 0.5 : (b == 39) ? angle -= 0.5 : angle;
        }
        $(window).keydown(function(e) { 
            d[e.which] = true;
        });
        $(window).keyup(function(e) { 
            d[e.which] = false; 
        });

        setInterval(function() {
            box.css({
                transform: function(index,value) { return "rotate(" + newr(37, 39) + "deg)"; }
            });
        }, 20);
});

我的目标是在我按下左 或右 箭头键时立即激活转换，并在释放键时停止旋转。它现在的样子是不断旋转的。

Here is the fiddle

Answer 1

我自己想通了。它无法正常工作的原因是因为在 newr(a, b) 函数中，我首先检查第一个参数 a == 37，这意味着当我用 37 作为我的第一个参数调用了这个函数——它永远是真的。这是正确的函数:

var newr = function(a, b){
    return (d[a]) ? angle += 0.5 : (d[b]) ? angle -= 0.5 : angle;
 }