Question

我看过看似相似的动画问题，但似乎没有一个能让我找到解决方案。我试图动画一个冒泡排序循环来显示移动数字但不知何故这不起作用有效的循环是：

var locations = [ '1', '2', '3', '4', '5', '6', '7'];
function bubbleSort2 () {
    do {
        swapped = false;
        for (var i = 0; i < locations.length-1; i++) {
            if (parseInt($('#' + locations[i]).text()) > parseInt($('#' + locations[i+1]).text())) {
                $('#' + locations[i] + '>p').appendTo($('#setaside'));
                $('#' + locations[i+1] + '>p').appendTo($('#' + locations[i] ));
                $('#setaside>p').appendTo($('#' + locations[i+1]));
                swapped = true;
            }
        }
    } while(swapped);
}

当我尝试使用动画功能时，我可能会喋喋不休。通过各种调整，我可以获得一个正确的动画，但不是循环。非工作循环，可能解释我想要做的是：

var locations = [ '1', '2', '3', '4', '5', '6', '7'];
function bubbleSort2 () {
    do {
        swapped = false;
        for (var i = 0; i < locations.length-1; i++) {
            if (parseInt($('#' + locations[i]).text()) > parseInt($('#' + locations[i+1]).text())) {
                $('#' + locations[i]).fadeOut("slow", function(){
                    $('#' + locations[i] + '>p').appendTo($('#setaside'));
                })  ;
                $('#' + locations[i+1]).fadeOut("slow", function(){
                    $('#' + locations[i]).fadeIn("slow", function (){
                        $('#' + locations[i+1] + '>p').appendTo($('#' + locations[i] ));
                    }) ;
                }) ;
                $('#' + locations[i+1]).fadeIn("slow", function (){
                    $('#' + locations[i+1] + '>p').appendTo($('#' + locations[i] ));
                })  ;
                $('#setaside>p').appendTo($('#' + locations[i+1]));
                swapped = true;
            }
        }
    } while(swapped);
}

完整的HTML，有效：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript">
        var locations = [ '1', '2', '3', '4', '5', '6', '7'];
        function bubbleSort2 () {
            do {
                swapped = false;
                for (var i = 0; i < locations.length-1; i++) {
                    if (parseInt($('#' + locations[i]).text()) > parseInt($('#' + locations[i+1]).text())) {
                        $('#' + locations[i] + '>p').appendTo($('#setaside'));
                        $('#' + locations[i+1] + '>p').appendTo($('#' + locations[i] ));
                        $('#setaside>p').appendTo($('#' + locations[i+1]));
                        swapped = true;
                    }
                }
            } while(swapped);
        }
    </script>

</head>
<body>
<button onclick="bubbleSort2()">Bubble Sort</button>

<div class="hidden" id="setaside"> </div>

<div id="1"> <p>55</p>  </div>
<div id="2"> <p>90</p> </div>
<div id="3"> <p>33</p> </div>
<div id="4"> <p>21</p> </div>
<div id="5"> <p>80</p> </div>
<div id="6"> <p>111</p> </div>
<div id="7"> <p>11</p> </div>

</body>
</html>

非常感谢您的帮助。

Answer 1

请改为：Fiddle

HTML

<button>Bubble Sort</button>
<div id="to-sort">
    <div id="1">
        <p>55</p>
    </div>
    <div id="2">
        <p>90</p>
    </div>
    <div id="3">
        <p>33</p>
    </div>
    <div id="4">
        <p>21</p>
    </div>
    <div id="5">
        <p>80</p>
    </div>
    <div id="6">
        <p>111</p>
    </div>
    <div id="7">
        <p>11</p>
    </div>
</div>

JS

function doSort() {
    var $divs = $('#to-sort').children(),
        arr = [];

    if ($divs.length) {
        $divs.each(function (k, v) {
            arr.push(parseInt($(v).find('p').text(), 10));
        });

        var sorted = arr.sort(function (a, b) {
            return a - b;
        });

        var timing = 200;
        $divs.each(function (k, v) {
            setTimeout(function () {
                $(v).find('p').fadeOut(500, function () {
                    $(v).find('p').text(sorted[k]).fadeIn(500);
                });
            }, 500 + timing);
            timing += 200;
        });
    }
}

$('button').click(doSort);

循环中的jquery动画不起作用

1 个答案: