针对 .animate() 的特定 DIV 元素

Question

我有 2 个 div 元素，我希望它们能够通过单击按钮在屏幕上移动。我还希望能够通过单击 2 个按钮中的 1 个来切换活动 div。

现在左右移动有效，但是当我切换活动 div 并尝试向上或向下移动时，两个 div 元素一起移动！

请给我指明正确的方向，我在这方面迷路了。

你可以在这里看到我在做什么： https://jsfiddle.net/jkries/x1k5yLrf/1/

感谢任何建议。

       var playerTarget;
       $(document).ready(function() {
           $('#pickPlayer1').click(function() {
               playerTarget = '#player1';
           });
           $('#pickPlayer2').click(function() {
               playerTarget = '#player2';
           });

           //Movement scripts
           $('#moveLeft').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "-=30px" //moves left
               });
           });
           $('#moveRight').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "+=30px" //moves right
               });
           });
           $('#moveDown').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "+=30px" //moves down
               });
           });
           $('#moveUp').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "-=30px" //moves up
               });
           });
       });

<body>

<button id="pickPlayer1">Player 1</button>
<button id="pickPlayer2">Player 2</button><br><br>

<button id="moveLeft">Move Left</button>
<button id="moveRight">Move right</button>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<hr>


Click a player to move that player:<br>

<div id="player1" style="background:#98bf21;height:80px;width:80px;position:relative;">Thing 1</div>

<div id="player2" style="background:orange;height:80px;width:80px;position:relative;">Thing 2</div>

</body>

Answer 1

问题出在 CSS，元素现在相互依赖。因此，当您将 margin-top 设置为第一个方块时，它会将另一个方块向下推，然后反转。将 position: relative; 更改为 position: absolute; 即可。

已更新JSFIDDLE。

请参阅下面的工作片段：

var playerTarget;
       $(document).ready(function() {
           $('#pickPlayer1').click(function() {
               playerTarget = '#player1';
               
           });
           $('#pickPlayer2').click(function() {
               playerTarget = '#player2';
           });

           //Movement scripts
           $('#moveLeft').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "-=30px" //moves left
               });
           });
           $('#moveRight').click(function() {
               $(playerTarget).animate({
                   'marginLeft' : "+=30px" //moves right
               });
           });
           $('#moveDown').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "+=30px" //moves down
               });
           });
           $('#moveUp').click(function() {
               $(playerTarget).animate({
                   'marginTop' : "-=30px" //moves up
               });
           });
       });

#player2{
  top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<button id="pickPlayer1">Player 1</button>
<button id="pickPlayer2">Player 2</button><br><br>

<button id="moveLeft">Move Left</button>
<button id="moveRight">Move right</button>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<hr>


Click a player to move that player:<br>

<div id="player1" style="background:#98bf21;height:80px;width:80px; position: absolute;">Thing 1</div>

<div id="player2" style="background:orange;height:80px;width:80px; position: absolute;">Thing 2</div>

</body>

或者另一种方法，如果你想保持相对位置，就是在移动元素时使用 top, bottom, right, left 而不是 margin：

var playerTarget;
       $(document).ready(function() {
           $('#pickPlayer1').click(function() {
               playerTarget = '#player1';
               
           });
           $('#pickPlayer2').click(function() {
               playerTarget = '#player2';
           });

           //Movement scripts
           $('#moveLeft').click(function() {
               $(playerTarget).animate({
                   'left' : "-=30px" //moves left
               });
           });
           $('#moveRight').click(function() {
               $(playerTarget).animate({
                   'left' : "+=30px" //moves right
               });
           });
           $('#moveDown').click(function() {
               $(playerTarget).animate({
                   'top' : "+=30px" //moves down
               });
           });
           $('#moveUp').click(function() {
               $(playerTarget).animate({
                   'top' : "-=30px" //moves up
               });
           });
       });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

<button id="pickPlayer1">Player 1</button>
<button id="pickPlayer2">Player 2</button><br><br>

<button id="moveLeft">Move Left</button>
<button id="moveRight">Move right</button>
<button id="moveDown">Move Down</button>
<button id="moveUp">Move Up</button>
<hr>


Click a player to move that player:<br>

<div id="player1" style="background:#98bf21;height:80px;width:80px; position: relative;">Thing 1</div>

<div id="player2" style="background:orange;height:80px;width:80px; position: relative;">Thing 2</div>

</body>

针对 .animate() 的特定 DIV 元素

Targeting specific DIV element for .animate()

jquery

jquery-animate