如何在两个div之间切换运动?

时间:2015-07-22 08:41:21

标签: javascript jquery html css

我用div制作了两个框,用箭头键移动它们,单个框就可以正常工作了。但是当我添加第二个框时,即使我给了他们不同的ID,他们也开始同时移动。我想要实现的是当用户点击空格键时,第一个框被禁用,第二个框被激活。我也搜索了类似的东西,但我找不到任何东西。所以我在这里做了JSFiddle所以你可以仔细看看。

这是我的JQuery代码:

<script>
        jQuery(document).keydown(function (e) {
            switch (e.which) {
                case 37:
                    jQuery("#cube").stop().animate({ left: '-=10' });
                    break;
                case 38:
                    jQuery("#cube").stop().animate({ top: '-=10' });
                    break;
                case 39:
                    jQuery("#cube").stop().animate({ left: '+=10' });
                    break;
                case 40:
                    jQuery("#cube").stop().animate({ top: '+=10' });
                    break;
            }
        });

        var space = false;
        jQuery(function () {
            jQuery(document).keydown(function (evt) {
                if (evt.keyCode == 32) {
                    space = true;
                }
            });
        });
        if (space == true) {
            jQuery(document).keydown(function (e) {
                switch (e.which) {
                    case 37:
                        jQuery("#cubetwo").stop().animate({ left: '-=10' });
                        break;
                    case 38:
                        jQuery("#cubetwo").stop().animate({ top: '-=10' });
                        break;
                    case 39:
                        jQuery("#cubetwo").stop().animate({ left: '+=10' });
                        break;
                    case 40:
                        jQuery("#cubetwo").stop().animate({ top: '+=10' });
                        break;
                }
            });
        }
</script>

非常感谢任何帮助,提前谢谢。

2 个答案:

答案 0 :(得分:3)

你忘记在你的jsfiddle中包含jquery。而且您可以使用一个keydown事件来捕获所有行为。

当用户按空格键时,切换将要移动的目标。

按箭头键时,移动目标。

已编辑:

如果您的预期行为是:只有在按下space时,箭头键才会影响到#cubetwo,否则会移动#cube,然后您可以添加keyup事件来实现这个,只需使用/* */中注释掉的部分。

由于添加另一个代码段对于答案来说太长了,我已经创建了一个jsfiddle来测试第二个行为,选择一个你期望的行为。

var space = false;
var target = space ? jQuery("#cube") : jQuery("#cubetwo");
/*
var target = jQuery("#cube");
*/
jQuery(document).keydown(function (e) {
    switch (e.which) {
      case 37:
        target.stop().animate({ left: '-=10' });
      break;
      case 38:
        target.stop().animate({ top: '-=10' });
        break;
      case 39:
        target.stop().animate({ left: '+=10' });
        break;
      case 40:
        target.stop().animate({ top: '+=10' });
        break;
      case 32:
        // Swtich target.
        space = !space;
        target = space ? jQuery("#cube") : jQuery("#cubetwo");
        /*
        target = jQuery("#cubetwo");
        */
      break;
  }
});

/*
jQuery(document).keyup(function (e) {
   if (e.which === 32) {
     target = jQuery("#cube");
   }
});
*/
#cube {
            height: 125px;
            width: 125px;
            border-style: solid;
            border-width: 2px;
            position: absolute;
            background-color: green;
            text-align: center;
            top: 0px;
            left: 0px;
        }
        #cubetwo {
            height: 125px;
            width: 125px;
            border-style: solid;
            border-width: 2px;
            position: absolute;
            background-color: blue;
            text-align: center;
            top: 0px;
            left: 700px;
        }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<body>
<div id="cube">
        Press arrow keys to move me
    </div>
    <div id="cubetwo">
        Hit space to activate me
    </div>
</body>

答案 1 :(得分:1)

你必须这样做:

/* controlled cube */
var whichCube = jQuery("#cube");

/* arrows*/
jQuery(document).keydown(function (e) {
            switch (e.which) {
                case 37:
                    whichCube.stop().animate({ left: '-=10' });
                    break;
                case 38:
                    whichCube.stop().animate({ top: '-=10' });
                    break;
                case 39:
                    whichCube.stop().animate({ left: '+=10' });
                    break;
                case 40:
                    whichCube.stop().animate({ top: '+=10' });
                    break;
            }
 });

 /* space */
 jQuery(document).keydown(function (evt) {
            if (evt.keyCode == 32) /*space*/ {

          /*toggle 1->2, or 2->1 */

               if(whichCube == jQuery("#cube"))                      
                            whichCube = jQuery("#cubeTwo");
               else         
                            whichCube = jQuery("#cube");
            }
        });

        }