Question

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

Answer 1

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

Answer 2

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

＆＃13;

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

＆＃13;

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

＆＃13;

你也可以使用jquery，binding＆＃34; focus＆＃34;和＆＃34;模糊＆＃34;按钮上的事件，并将其设置为#btn：焦点样式值。

Answer 3

我尝试用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 个答案: