javascript - jquery如何让一个元素在动画结束后回到初始位置

Question

我正在使用 jQuery 在我的网站上制作一些动画，但我只是复制部分代码，我并没有真正掌握任何 jQuery 技能。我的问题是我有一个按钮可以让我的动画在点击时开始并且动画 block 移动但我希望他在动画结束时返回到他的初始位置使得不可能通过点击太多来获得动画 block 按钮上的次数。我希望很清楚，这是我的代码:

HTML

<div id="button">Click here</div>
<div id="square"></div>

CSS

#square { width:100px; height:100px; position:relative;}

JavaScript

$( "#button" ).click(function() {
$( "#square" ).animate({
left: "-=60px",
}, 400);
});

我怎样才能让方 block 在动画结束后回到他的初始位置？

Answer 1

除了使用 jquery animate，您还可以在 css 中创建一个动画，并通过添加一个类来触发该动画。默认情况下，css 动画返回到它们的初始状态，参见示例 here