Controlling the animation
<p>I am creating a whack-a-mole style game where a sum is given and numbers animate from the bottom of the container to the top. The aim of the game is to click the correct answer to the sum and collect as many correct answers as possible.</p>

<p>I have also added a couple of extra icons to make the game more fun. One of the icons is a flame which speeds up the animation for 5 seconds.</p>

<p>At the moment it makes all the icons move really fast all at once. Instead of this happening I want the flow to continue as usual, but at a faster pace.</p>

<p>This is what I have so far..</p>

<pre><code>$(".character").click(clickThrottled(function () {
    if ($(this).hasClass("heat")) {
        $(this).effect("explode", 400);
        $("#container").children().css('top', '400px').fadeIn(1000).animate({
            'top': '-100px'
        }, 3000).fadeOut(1000);
    }
}));
</code></pre>

<p>Can someone show me where I am going wrong? Look at the demo and click the flame icon to get a better understanding of the problem.</p>

<p>Fiddle: <a href="http://jsfiddle.net/pUwKb/52/" rel="nofollow">http://jsfiddle.net/pUwKb/52/</a></p>
