如何在单击时将按钮移动（动画）到某个位置并在其他位置单击时返回到原始位置？答案

【问题标题】：How to move(animate) a button to a certain position on click and return to original position if click elsewhere?如何在单击时将按钮移动（动画）到某个位置并在其他位置单击时返回到原始位置？
【发布时间】：2016-07-23 10:29:42
【问题描述】：

假设我们有一个按钮<button id="btn">I'm a button</button>。它的位置在中心。现在当我点击这个按钮时它应该移动到让我们说左上角。当点击屏幕上的其他地方时，将按钮返回到原始位置（中心），这样下次我单击按钮时，它应该会重复转换。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

【讨论】：

【解决方案2】：

我尝试使用 javascript 来实现，也许你的意思是 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%;
}

和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;
});

【讨论】：

【解决方案3】：

也许这对您来说是最简单的解决方案。没有任何 javascripts 的纯 css。

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

&lt;button id="btn"&gt;I'm a button&lt;/button&gt;

您也可以使用 jquery，在按钮上绑定“focus”和“blur”事件，并将其动画化为 #btn:focus 样式值。

【讨论】：