javascript - JQuery 'animate' 在调用 2 次后停止工作

Question

我有一些非常简单的 jquery 可以移动 <div>单击相关按钮时向左和向右(一个框)。但是，单击一两次后，<div>停止移动:

这是怎么回事？

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#box").animate({
      right: "100px"
    });
  });
  
  $("#btn2").click(function() {
    $("#box").animate({
      left: "100px"
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<button id="btn1">Animate right</button>
<button id="btn2">Animate left</button>
<div id="box" style="background:#98bf21;height:100px;width:100px;margin:6px;position:relative;"></div>

Answer 1

问题是因为您从未将 right 或 left 值重置为默认值。您可以使用 css() 实现:

$(document).ready(function() {
  $("#btn1").click(function() {
    $("#box").animate({
      right: "100px"
    }).css('left', 'auto');
  });

  $("#btn2").click(function() {
    $("#box").animate({
      left: "100px"
    }).css('right', 'auto')
  });
});

#box {
  background: #98bf21;
  height: 100px;
  width: 100px;
  margin: 6px;
  position: relative;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<button id="btn1">Animate right</button>
<button id="btn2">Animate left</button>
<div id="box"></div>