Question

我有一个 div ，当我按下 j 按钮时，它只会动画一次，我想在每次按下时为 div 设置动画键盘上的 j 按钮，无需刷新页面。

这可能是使用JQuery ???

抱歉我的英语不好。

以下是我的代码。

animate.html

<!DOCTYPE html>
<html>
<head>
    <style> 
    .div {
        width: 100px;
        height: 100px;
        background-color: red;
        position: relative;
        -webkit-animation-name: example; /* Chrome, Safari, Opera */
        -webkit-animation-duration: 1s; /* Chrome, Safari, Opera */
        animation-name: example;
        animation-duration: 1s;
    }

    /* Chrome, Safari, Opera */
    @-webkit-keyframes example {
        0%   {background-color:red; left:0px; top:0px;}
        50%  {background-color:green; left:100px; top:100px;}
        100% {background-color:red; left:0px; top:0px;}
    }

    /* Standard syntax */
    @keyframes example {
        0%   {background-color:red; left:0px; top:0px;}
        50%  {background-color:yellow; left:100px; top:100px;}
        100%  {background-color:yellow; left:0px; top:0px;}

    }
    </style>
</head>
<body>

    <p>
        <b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.
    </p>
    <br>
    <div id="box"></div>

    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/jquery.hotkeys.js"></script>

    <script>
        $(document).bind('keydown', 'j', function(){
            $('#box').addClass("div");
        });
    </script>

</body>
</html>

Answer 1

Jquery已将'bind'替换为'on'。

试试这段代码：

$('body').on('keydown',function(e){
  if(e.which==82 || e.which==106){
        $('#box').addClass("div");
  }
});

'J'的ASCII值为82，'j'为106。

Answer 2

你必须每次都删除课程并再次向你添加课程div，这里是小提琴 -
http://jsfiddle.net/hwu1z7dh/1/

Answer 3

看起来我的问题是你没有在动画结束后删除class=div。在This Fiddle中，我添加了一个在CSS动画结束时触发的事件：

//fires when 'j' key is pressed
$('body').on('keydown', function (e) {

    if (e.which == 106 || e.which == 74) {
        $('#box').addClass("div");
    }
});

$('#box').on('webkitAnimationEnd oanimationend msAnimationEnd animationend',
function (e) {
    $('#box').removeClass("div");
});

此代码适用于我在Chrome 44和FireFox 39中，但我刚刚在IE10中测试过它，它似乎根本不起作用。甚至不想发起最初的keydown事件。我认为一般的想法仍然是正确的。如果您想要重复动画，则必须在动画结束后删除.div类，以便您可以在keydown上再次添加它。

已编辑固定事件在我的小提琴中触发'j'而不是'r'。

Answer 4

 $(document).on("keydown", function (e) {
    var key = e.keyCode;
    if(key==74 || key==106){
    $('#box').addClass("div");
   }
 });

当我按下j键时，keydown事件只会触发一次

4 个答案: