为什么只有我的一些定向运动功能有效？

Question

不知道有没有人能帮帮我。我还在学习 jQuery，我不明白为什么 "left" 和 "up" 按钮不起作用。它完美地下降和正确。这是我的代码：

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#dolu").click(function(){
        $("div").animate({
            marginTop:"100px"
        }, "slow");
    });
});
$(document).ready(function(){
    $("#desno").click(function(){
        $("div").animate({
            marginLeft:"100px"
        }, "slow");
    });
});
$(document).ready(function(){
    $("#gore").click(function(){
        $("div").animate({
            marginBottom:"100px"
        }, "slow");
    });
});
$(document).ready(function(){
    $("#levo").click(function(){
        $("div").animate({
            marginRight:"100px"
        }, "slow");
    });
});
</script>
</head>
<body>
<button id="gore">Up</button>
<button id="dolu">Down</button>
<button id="levo">Left</button>
<button id="desno">Right</button><br><br>
<div id="kocka" style="width:50px; height:50px; background-color:#D0D0D0; opacity:1"></div>
</body>
</html>

Answer 1

您正在设置对头寸没有影响的保证金。在有大量 space 的地方放置右边距对左侧位置没有任何作用。相反，将左边距改回来，或从现有的左边距中减去 100。

Answer 2

您将希望使用字符串值进行相对移动。也仅参考 marginTop 和 marginLeft

$(function() {
  var k = $("div#kocka");
  $("#dolu").click(function() {
    k.animate({
      marginTop: "+=100px"
    }, "slow");
  });
  $("#desno").click(function() {
    k.animate({
      marginLeft: "+=100px"
    }, "slow");
  });
  $("#gore").click(function() {
    k.animate({
      marginTop: "-=100px"
    }, "slow");
  });
  $("#levo").click(function() {
    k.animate({
      marginLeft: "-=100px"
    }, "slow");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="gore">Up</button>
<button id="dolu">Down</button>
<button id="levo">Left</button>
<button id="desno">Right</button><br><br>
<div id="kocka" style="width:50px; height:50px; background-color:#D0D0D0; opacity:1">
</div>

参考：Moving from position A to position B slowly with animation

为什么只有我的一些定向运动功能有效？

Why do only some of my directional movement functions work?

jquery

html

jquery-animate