Question: In the following example, this script applies the class 'green' to all 'span' HTML elements randomly, and at a steady rate.

```
var items = $('span').get();
var interval = setInterval(function() {
    var random_number = Math.floor(Math.random() * items.length);
    $(items[random_number]).addClass('green');
    items.splice(random_number, 1);
    if (items.length === 0) {
        clearInterval(interval);
      }
     }, 10);

```

<http://jsfiddle.net/DUbQB/>

I've updated it so that it changes 2 elements per interval, simply by calling the function twice.

```
var items = $('span').get();
var interval = setInterval(function() {

    function rand(random_number) {
    var random_number = Math.floor(Math.random() * items.length);
    $(items[random_number]).addClass('green');
    items.splice(random_number, 1);
    }

    rand(1);
    rand(2);

    if (items.length === 0) {
        clearInterval(interval);
    }
}, 500);

```

<http://jsfiddle.net/DUbQB/3/>

All I want to know is, is there a way to get this script to randomly turn all elements green in the **same time**, regardless of how many elements there are?

For example, <http://jsfiddle.net/DUbQB/3/> completes in ten intervals because there's twenty elements and the random function is called twice. 

But if there were forty elements, the script would take twenty intervals, and so twice as long. How could this script always take the same amount of time to complete, regardless of how many elements there are?

Answer: 
I'm not a JS developer but this caught me to try out (the first time I tried JSFiddle and it's really cool).

Here's a solution that results in a constant number of steps even if there are rounding differences.

```
function DoTransition() {
    var items = $('span').get();
    var steps = 10;
    var residuum = 0;
    var interval = setInterval(function() {

        function rand() {
            var random_number = Math.floor(Math.random() * items.length);
            $(items[random_number]).addClass('green');
            items.splice(random_number, 1);
        }

        var localSteps = items.length / steps + residuum;
        residuum = localSteps - Math.round(localSteps);
        localSteps = Math.round(localSteps);
        for (var i = 0; i < localSteps; i++) {
            rand();
        }

        steps--;

        if (items.length === 0) {
            clearInterval(interval);
        }
    }, 500);
}

DoTransition();
```

UPDATE: fixed the problem with a small number of items... just a call to Math.round was missing. Now there are intermediate steps with 0 items updated if required. For testing I've created a new version that updates the asterisk with the localSteps variable (<http://jsfiddle.net/vQDhf/>).

UPDATE2: now a mathematically correct transition that distributes equally over the time line.
You just have to do small math calculation to determine either how fast to run the interval or how many elements to change per interval.

For example, if you want it to complete in 5000ms, then you just do:

```
var items = $('span').get();
var intervalTime = 5000 / items.length;

```

Then use that `intervalTime` with the `setInterval()` call. This will complete the operation in 5000ms no matter how many spans there are.