代码之家 › 专栏 › 技术社区 › Boris Grunwald

确保完成jquery动画

jquery

Boris Grunwald · 技术社区 · 5 年前

我正在使用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);



});

    <!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; }

1 回复 | 直到 5 年前

Golda 5 年前

我已将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>