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

Question

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

Answer 1

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

Answer 2

也许这对你来说是最简单的解决方案。纯粹的CSS没有任何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>

您还可以使用jQuery，结合“重点”和“模糊”事件上的按钮，并以动画的#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; 
});