如何在单击时将按钮移动（动画）到特定位置，如果在其他位置单击，如何返回到原始位置？

Question

假设我们有一个按钮<button id="btn">I'm a button</button>它的位置在中央。现在，当我单击此按钮时，它应该移动到左上角。在其他位置单击时在屏幕上，将按钮返回到原始位置（中心），以便下次我单击该按钮时，它应该重复过渡。

Answer 1

您可以使用jQuery.animate()实现此目的。

Answer 2

Maybe this is the easiest solution for you. Pure css without any javascripts.

 #btn { position: fixed; right: 50%; top: 50%; margin-right: -84px; transition: all 0.3s linear; } #btn:focus { top:0; right: 100%; } 

 <button id="btn">I'm a button</button> 

You can also use jquery, binding "focus" and "blur" event on the button, and animate it to the #btn:focus style values.

Answer 3

I tried to make it with javascript maybe like this you mean https://jsfiddle.net/90c23wbr/

<div class="text-center">
  <button id="button" class='btn btn-primary to-center'>button</button>
</div>

css :

.btn {
  position:absolute;
  transition: 1s ease;
}
.to-center {
  top:50%;
}
.to-top {
  top:5%;
}

and js:

var removeClass = true;

$("#button").click(function () {
   $(".btn").addClass('to-top');
   removeClass = false;
});

$("#button").click(function() {
  removeClass = false;
});

$("html").click(function () {
   if (removeClass) {
     $(".btn").removeClass('to-top');
   }
   removeClass = true;
});