只在密钥关闭时运行CSS转换 - jQuery

时间:2013-09-23 14:15:07

标签: jquery css rotation transform

我有以下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

1 个答案:

答案 0 :(得分:0)

我自己想通了。它不能正常工作的原因是因为在newr(a, b)函数中我通过检查第一个参数a == 37开始了,这意味着当我用37调用函数作为我的第一个参数时 - 它总是是真的。这是正确的功能:

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