Question

我正在使用jQuery在我的网站上制作一些动画，但我只是复制了一些代码部分而且我还没有真正掌握jQuery的任何技巧。我的问题是我有一个按钮，让我的动画开始点击和动画块移动，但我希望他回到动画的最后到他的初始位置，使得到目前为止无法通过clickinG获得动画块按钮上的时间。我希望很清楚，这是我的代码：

HTML

$([parent selector]).on("click",".achievementsIndicator.active",function(){ ...function goes here...  })

CSS

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

的JavaScript

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

动画结束后，如何让quare回到原来的位置？

Answer 1

您可以在css中创建动画并使用添加类来触发该动画，而不是使用jquery动画。默认css动画会返回其初始状态，请参阅示例here

Answer 2

您将使用完整的回调函数来重新调整元素的位置。请参阅：http://codepen.io/TheStonedTurtle/pen/gLRevN

http://api.jquery.com/animate/

$( "#square" ).animate({
  left: "-60px",
}, 400, function(){
  $( "#square" ).css('left','0px');
});

Answer 3

为了使动画更流畅，我建议使用js和css的组合。

示例代码段：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="button">Click here</div>
<div id="square"></div>http://stackoverflow.com/questions/40795871/jquery-how-to-make-an-element-comeback-to-initial-position-after-animation/40795957#

{{1}}

{{1}}

jquery如何使元素在动画后回归到初始位置

3 个答案: