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

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>

Answer 2

一种选择是从 jQuery 中删除 margin: 0，并将 right 属性更改为 left。（有关工作示例，请参阅 this 笔。）

jQuery 看起来像这样：

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

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

Repositioning absolute element to right

javascript

jquery

jquery-animate