Animation Problem on Selection Sort Algorithm Simulation using jQuery and JavaScript

Question

I'm trying to visualize the selection sort algorithm. The movements start working properly and the array elements reverse, but suddenly, for the last iterations, everything turns into a mess as shown in the picture. I can't figure out the problem.

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

The issue is although you have mutated the array itself, you have not considered the class as well. You utilize the class .slotX where X is its index on the array. You need to mutate the class as well. You can do this on the callback of animation so that after the animation, you will have the correct "order" of the sorted array in your CSS classes.

Lastly, I do not recommend using CSS properties left and right simultenously in this scenario.

When both left and right are defined, if not prevented from doing so by other properties, the element will stretch to satisfy both. If the element cannot stretch to satisfy both -- for example, if a width is declared -- the position of the element is over-constrained. When this is the case, the left value has precedence when the container is left-to-right; the right value has precedence when the container is right-to-left.

You can read more at CSS Left & CSS Right.

You can simply continue using left property to move your containers around. In this case, I mutate their new left property relative to it's current position.

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