JoeShuffle v1.0

Originally made for Joe's question in StackOverflow http://stackoverflow.com/questions/7355905/ Made by Kalle H. Väravas http://stackoverflow.com/users/721553/ No direct copyright or licences. Use however you want, just give me lots of +1 :)

HTML

<ul id="JoeShuffle">
     <li><div class="boxes" style="background: pink;" /></li>
     <li><div class="boxes" style="background: red;" /></li>
     <li><div class="boxes" style="background: blue;" /></li>
     <li><div class="boxes" style="background: green;" /></li>
     <li><div class="boxes" style="background: brown;" /></li>
 </ul>

CSS

ul, li {margin: 0px; padding: 0px;}
ul {list-style-type: none;}
ul li {float: left;}

/* For easier example: */
.boxes {width: 100px; height: 100px;}

JavaScript

(function($){
    $.fn.JoeShuffle = function (settings) {
        
        // Set default settings
        var defaults = {
            intervalSpeed: 1700
        };
        settings = jQuery.extend(defaults, settings || {});
        
        // Sets the ul lists default element
        var _this = $(this);
        
        // Gets all the children
        var children = _this.children('li');
        
        // Counts all the children
        var children_count = children.size();
        
        // Sets random child, that gets hidden
        var rand_child = Math.floor(Math.random() * children_count);
        
        // Hide random child on first load
        children.eq(rand_child).addClass('hidden_child').hide();
        
        // This is the function, that returns a random visible child
        rand_visible_child = function () {
            return parseInt(Math.floor(Math.random() * (children_count -0)));
        };

        // Sets the position, that the first hidden child had
        var last_child = rand_child;
        
        // Starts the interval loop
        setInterval(function () {
            
            // Gets the list (as elements) of visible children
            var visible_children = _this.children('li:not(.hidden_child)');
            
            // Gets the hidden child as element
            var hidden_child = _this.children('li.hidden_child');
            
            // Gets a random visible child
            var rand_hide = rand_visible_child();
            
            // This makes sure same slot/position wouldn't get hidden again
            while (rand_hide == last_child) {
                //rand_hide = rand_visible_child();
            }

            // Sets the new slot/position, meaning the new child that is gonna get hidden
            visible_children.eq(rand_hide)
                // Fades it to half way
                .fadeTo(270, 0.5, function () {
                    // Then replaces it..
                   ...