javascript - 将绝对元素重新定位到右侧

Question

嗨，我正在开发一个简单的应用程序，如果单击它就会动画并移动到右侧。我的问题是它向相反的方向移动。我尝试使用 css()，它有效，但没有动画。我怎样才能做到这一点？或者有其他方法可以让它发挥作用。

谢谢，希望你能理解我。

$('.circle').click(function(){
    $(this).animate({
      right: 200,
      top: 200,
      margin: 0
    },1000);
});

.circle{
  width: 100px;
  height: 100px;
  background-color: #222;
  border-radius: 100px;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

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

Answer 1

不要使用边距使其居中，请使用calc，如下例所示:

$('.circle').click(function() {
  $(this).animate({
    right: 50,
    top: 25
  }, 1000);
});

.circle {
  width: 100px;
  height: 100px;
  background-color: #222;
  border-radius: 100px;
  position: absolute;
  top: calc(50vh - 50px);
  right: calc(50% - 50px);
}

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