define start to finish positions
<p>I am creating a new "whack-a-mole" style game where the children have to hit the correct numbers in accordance to the question. So far it is going really well, I have a timer, count the right and wrong answers and when the game is started I have a number of divs called "characters" that appear in the container randomly at set times.</p>

<p>I have been given a theme of bubbles so they want me to make the "characters" start at the bottom and animate upwards. Any ideas how I would achieve this?</p>

<p>Here is the code that currently maps the divs to there positions in the canvas...</p>

<pre><code>function moveRandom(id) {

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

var pad = parseInt($('#container').css('padding-top').replace('px', ''));

var bHeight = $('#' + id).height();
var bWidth = $('#' + id).width();

maxY = cPos.top + cHeight - bHeight - pad;
maxX = cPos.left + cWidth - bWidth - pad;

minY = cPos.top + pad;
minX = cPos.left + pad;

newY = randomFromTo(minY, maxY);
newX = randomFromTo(minX, maxX);

$('#' + id).css({
    top: newY,
    left: newX
}).fadeIn(1000, function() {
    setTimeout(function() {
        $('#' + id).fadeOut(1000);
        window.cont++;
    }, 7000);
});
</code></pre>

<p>Here is my most recent fiddle: <a href="http://jsfiddle.net/pUwKb/15/" rel="nofollow">http://jsfiddle.net/pUwKb/15/</a></p>
