Preventing overlapping elements during animation
<p>I am creating an addition and subtraction game where a sum is randomly generated and displayed at the top of the container. Numbers then animate from bottom to top and the idea is to click on the correct one.</p>

<p>Numbers are given a random "x" position at the start and then animate to the top at the same speed.</p>

<p>The problem I am having is that when the program is running the elements can sometimes overlap because they are given a similar "x" position at the start.</p>

<p>I need to tell the program not to give the same "x" position until the element using it is far enough up the screen for them to not overlap.</p>

<p>The problem is at it's worst when the game first starts.</p>

<p>Here is the relevant code...</p>

<pre><code>var currentMoving = [];

function moveRandom(id) {

    // Mark this one as animating
    currentMoving.push(id);

    var cPos = $('#container').offset();
    var cHeight = $('#container').height();
    var cWidth = $('#container').width();
    var bWidth = $('#' + id).width();

    var bHeight = $('#' + id).css('top', '395px').fadeIn(100).animate({
        'top': '-55px'
    }, AnimationSpeed,'linear').fadeOut();

    maxWidth = cPos.left + cWidth - bWidth;
    minWidth = cPos.left;
    newWidth = randomFromTo(minWidth, maxWidth);

    $('#' + id).css({
        left: newWidth
    }).fadeIn(100, function () {
        setTimeout(function () {
            $('#' + id).fadeOut(10);

            // Mark this as no longer animating                
            var ix = $.inArray(id, currentMoving);
            if (ix !== -1) {
                currentMoving.splice(ix, 1);
            }
            window.cont++;
        }, 100);
    });
}
</code></pre>

<p>Here is a fiddle - <a href="http://jsfiddle.net/pUwKb/68/">http://jsfiddle.net/pUwKb/68/</a></p>
