jquery - 确保完成 jquery 动画
问题描述
我正在使用 Jquery 创建一个看起来像这样的简单游戏
现在,我想为两个 div 交换位置设置动画。我用以下代码完成了:
$(document).ready(function () {
function swapInDom(fromElem, toElem) {
fromElem.removeAttr('style');
toElem.removeAttr('style');
var tmp = fromElem.html();
fromElem.html( toElem.html());
toElem.html(tmp);
}
function move(from, to) {
var fromElem = $('.container div:nth-child('+from+')');
var toElem = $('.container div:nth-child('+to+')');
var distance = (to - from)*70;
fromElem
.animate({'top': '+=70px'}, 'slow')
.animate({'left': '+='+distance+'px'}, 'slow')
.animate({'top': '-=70px'}, 'slow');
toElem
.animate({'top': '-=70px'}, 'slow')
.animate({'left': '-='+distance+'px'}, 'slow')
.animate({'top': '+=70px'}, 'slow');
$(fromElem,toElem).promise().done(function () {
swapInDom(fromElem,toElem)
})
}
move(1,8);
move(2,9);
});
我的html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="outerContainer">
<div class="container">
<div>
<span>i</span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
</div>
<div class="container">
<div>
<span>20</span>
</div>
<div>
<span>35</span>
</div>
<div>
<span>-15</span>
</div>
<div>
<span>7</span>
</div>
<div>
<span>55</span>
</div>
<div>
<span>1</span>
</div>
<div>
<span>-22</span>
</div>
</div>
</div>
</body>
</html>
我的风格
{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box; }
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: gray;
overflow: hidden; }
.outerContainer {
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center; }
.container {
width: 100%;
height: 80px;
margin-left: 2px;
display: flex;
align-items: center;
justify-content: center;
background: gray; }
.container div {
width: 70px;
height: 70px;
background: white;
border: 2px solid black;
box-shadow: black;
display: flex;
justify-content: center;
align-items: center;
position: relative; }
.container span {
font-size: 2.5em; }
.container:first-child div {
background-color: transparent;
border: none;
margin-bottom: 100px; }
动画完成后,我使用回调来交换 DOM 中的元素。问题是,如果我调用 move() 函数两次,它只会在第二次调用 move() 中启动的动画完成后进入 swapInDom() 方法,这会搞砸。
我想要的是,每次我调用 move() 函数时,它都应该启动动画,交换 DOM 中的元素,然后继续下一个动画。
解决方案
我已经将 move 函数放在了div
Promise 中。我希望这能帮到您。
Jquery,我进行更改的地方
move(1, 8);
$("div").promise().done(function () {
move(2, 9);
});
$(document).ready(function () {
function swapInDom(fromElem, toElem) {
fromElem.removeAttr('style');
toElem.removeAttr('style');
var tmp = fromElem.html();
fromElem.html(toElem.html());
toElem.html(tmp);
}
function move(from, to) {
var fromElem = $('.container div:nth-child(' + from + ')');
var toElem = $('.container div:nth-child(' + to + ')');
var distance = (to - from) * 70;
fromElem
.animate({ 'top': '+=70px' }, 'slow')
.animate({ 'left': '+=' + distance + 'px' }, 'slow')
.animate({ 'top': '-=70px' }, 'slow');
toElem
.animate({ 'top': '-=70px' }, 'slow')
.animate({ 'left': '-=' + distance + 'px' }, 'slow')
.animate({ 'top': '+=70px' }, 'slow');
$(fromElem, toElem).promise().done(function () {
swapInDom(fromElem, toElem)
})
}
move(1, 8);
$("div").promise().done(function () {
move(2, 9);
});
});
{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box; }
html, body {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: gray;
overflow: hidden; }
.outerContainer {
width: 100%;
flex-direction: column;
justify-content: center;
align-items: center; }
.container {
width: 100%;
height: 80px;
margin-left: 2px;
display: flex;
align-items: center;
justify-content: center;
background: gray; }
.container div {
width: 70px;
height: 70px;
background: white;
border: 2px solid black;
box-shadow: black;
display: flex;
justify-content: center;
align-items: center;
position: relative; }
.container span {
font-size: 2.5em; }
.container:first-child div {
background-color: transparent;
border: none;
margin-bottom: 100px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="outerContainer">
<div class="container">
<div>
<span>i</span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
<div>
<span></span>
</div>
</div>
<div class="container">
<div>
<span>20</span>
</div>
<div>
<span>35</span>
</div>
<div>
<span>-15</span>
</div>
<div>
<span>7</span>
</div>
<div>
<span>55</span>
</div>
<div>
<span>1</span>
</div>
<div>
<span>-22</span>
</div>
</div>
</div>
推荐阅读
- function - 有没有什么方法可以仅用 XOR 和 NOT 来表示 AND 函数?
- ios - 无法安装 pod:架构 x86_64 的未定义符号
- javascript - 反应路由器路由与可选参数冲突
- django - 手动填充 Django ModelForm 的禁用字段
- nginx - Laravel 5.7 Nginx 500 访问页面时报错,可能是存储权限问题?
- python - Rest Framework 序列化器,禁止用户更改他人密码
- django - Nginx 无法启动高性能 Web 服务器和反向代理服务器
- sql - 如何查看有权访问红移表的用户列表?
- c# - 多页缓存失败
- inheritance - Golang 继承和方法覆盖