Animation 使用 jQuery 和 JavaScript 模擬選擇排序算法的問題

Question

我正在嘗試可視化選擇排序算法。 動作開始正常工作，數組元素反轉，但突然間，在最后一次迭代中，一切都變得一團糟，如圖所示。 我無法弄清楚問題所在。

async function selectionSort(main_arr) {

    for (var i=0; i<main_arr.length; i++)
    {   
        var min_ind=i;
        for(var j=i+1; j<main_arr.length; j++)
        {
            if(main_arr[min_ind]>main_arr[j])
            {
                min_ind=j;
            }
        }
        if(min_ind!=i)
        {
            var temp=main_arr[min_ind];
            main_arr[min_ind]=main_arr[i];
            main_arr[i]=temp;
            var offbig=$('.slot'+min_ind).offset().left,offsmall=$('.slot'+i).offset().left;
            
            $(".slot"+min_ind).animate(
                {
                    right:offbig-offsmall
                }
            ,500);
            
            $(".slot"+i).animate(
                {
                    left:offbig-offsmall
                }
            ,500);
            
            await sleep(1000);
        }
        
    }
}

Answer 1

問題是雖然您已經對數組本身進行了變異，但您也沒有考慮過 class。 您使用 class .slotX ，其中 X 是它在數組上的索引。 您還需要對 class 進行變異。 您可以在animation的回調中執行此操作，以便在 animation 之后，您將在 CSS 類中擁有正確的排序數組“順序”。

最后，我不建議在這種情況下同時使用right屬性left 。

當 left 和 right 都被定義時，如果其他屬性沒有阻止這樣做，則元素將拉伸以滿足兩者。 如果元素不能拉伸以滿足兩者——例如，如果聲明了寬度——則元素的 position 被過度約束。 在這種情況下，當容器從左到右時，左值優先； 當容器從右到左時，正確的值優先。

您可以在CSS Left和CSS Right閱讀更多內容。

你可以簡單地繼續使用left屬性來移動你的容器。 在這種情況下，我相對於它當前的 position 改變了他們的新left屬性。

async function selectionSort(main_arr) {

    for (var i=0; i<main_arr.length; i++)
    {   
        var min_ind=i;
        for(var j=i+1; j<main_arr.length; j++)
        {
            if(main_arr[min_ind]>main_arr[j])
            {
                min_ind=j;
            }
        }
        if(min_ind!=i)
        {
            var temp=main_arr[min_ind];
            main_arr[min_ind]=main_arr[i];
            main_arr[i]=temp;
            
            var offbig = $('.slot'+min_ind).offset().left
            var offsmall = $('.slot'+i).offset().left 
            
            $(".slot"+min_ind).animate(
                {
                    left:parseFloat($(".slot"+min_ind).css("left").replace("px", "")) - (offbig-offsmall)
                }
            ,500);
            
            $(".slot"+i).animate(
                {
                    left:parseFloat($(".slot"+i).css("left").replace("px", "")) + (offbig-offsmall)
                }
            ,500, function(){
                $('.slot'+i).removeClass('slot'+i).addClass('slot'+min_ind).addClass('temp');
                $('.slot'+min_ind).not('.temp').removeClass('slot'+min_ind).addClass('slot'+i);
                $('.temp').removeClass('temp');
            });
            
            await sleep(1000);
        }
        
    }
}