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

标签 javascript jquery html css animation

我正在使用 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 在动画结束后回到他的初始位置?

最佳答案

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

关于javascript - jquery如何让一个元素在动画结束后回到初始位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40795871/

相关文章:

javascript - 如何在任何 Bootstrap 模式中将焦点设置在第一个表单元素上

html - CSS 变换属性 Safari

javascript - 追加到DIV后找不到元素ID

Javascript 调用文本分析返回 HTTP 400 错误请求错误

javascript - Metafizzy .isotope ("layout") 给出 $elems 未定义

javascript - 为表格中红色背景的行添加跑马灯效果

Javascript 没有在手机的 chrome 应用程序中运行?

javascript - 从上到下淡入页面元素

javascript - Google OAuth2 不适用于移动设备

javascript - JS : How to print elements in a for loop with distinct #ids?