Расположение абсолютного элемента вправо

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

Один из вариантов - удалить margin: 0 из jQuery и изменить свойство right на left. (См. это перо для рабочего примера.)

Тогда jQuery будет выглядеть так:

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

Answer 2

Не используйте поле для центрирования, используйте 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>