Question

我遇到了一些jquery代码的问题。所以故事是，我正在尝试用jquery写一个蛇游戏。

$(document).ready(function(e) {
initial_move();
$(document).keydown(function(e){
         switch (e.keyCode) { 
        case 38:
            $('#snake-body').stop().add('#one').animate({marginTop:'-2%'},'fast');
            return('null');
        case 37: 
            return('null');
        case 39:
            return('null');
        case 40: 
            alert('bottom');
            return('null');
          }
      });
});
function initial_move(){
  $('#snake-body').css('margin-left','0%');
  $('#snake-body').animate({marginLeft:'100%'},5000,'linear',initial_move);
}

<div id="wrapper">
<div id="snake-body">
   <div id="2" class="part"></div>
       <div id="1" class="part"></div>
    </div>
</div>

我试图让蛇部分根据keydown移动时被卡住了。当我按向上箭头键时，首先id="one"的div应该向上移动，然后是id="two"，依此类推。

但是这段代码同时将div移动到margintop:'-2%'。我不明白，因为我只针对代码中的id="one" div。

   case 38:
   $('#snake-body').stop().add('#one').animate({marginTop:'-2%'},'fast');

我希望有人可以帮我解决这个问题。提前谢谢。

Answer 1

此代码：

$('#snake-body').stop().add('#one').animate({marginTop:'-2%'},'fast');

与此代码相同：

$('#snake-body').stop();
$('#snake-body, #one').animate({marginTop:'-2%'},'fast');

这意味着您要同时更新#snake-body和#one部分。

这是因为add()将#one div添加到您已选择的内容中......这意味着您同时拥有父（＃snake-body）和部分（#one）同时选择。

您可能想要做的是：

$('#snake-body').stop();
$('#one').animate({marginTop:'-2%'},'fast');

根据您对.stop()的意图，您可能希望停止单个部分而不是父级：

$('#snake-body .part').stop();
$('#one').animate({marginTop:'-2%'},'fast');

在jquery中一次动画一个兄弟姐妹

1 个答案: