Question

我正在使用Jquery创建一个看起来像这样的简单游戏

现在，我想为两个divs交换位置设置动画。我用以下代码完成了此操作：

$(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中的元素，然后继续进行下一个动画。

Answer 1

我已将move函数放置在div承诺中。我希望这能帮到您。

我在其中进行更改的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>

确保jQuery动画完成

1 个答案: