JS/jQuery - animated random name picker
<p>I'm trying to create a raffle ticket picking script using JS and jQuery.</p>

<p>So far so good - my script works. Now however I'd like to make it much more visual so that we can run it in assembly.</p>

<p>I have a JS Object which takes the following format:</p>

<pre><code>var TempObj = { 'Student_ID' : i, 'Student_Name' : data.users[i].Student_Name };
RewardPurchases.PurchasesArray[Count] = TempObj;
</code></pre>

<p>I'm then using this code to randomly select one of the students:</p>

<pre><code>$('button#random').click( function() {
    // "Total" is just the array length
    var Num = Math.floor(Math.random() * Total+1);
    Num--;

    // prove that the system has picked a random number out of the list
    alert("Random number out of " + Total + " is..." + Num);

    // find the array entry where the key is our random "Num"
    for (var i in RewardPurchases.PurchasesArray) {
        if (i == Num) {
            // we've found our entry, now we need more information about the corresponding student
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i &lt; data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            // print out the student's information - he or she is the winner!
            alert("Ticket number " + Num + " in the LEAP database belongs to...\n\n\n" + RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase() + " (" + TutorGroup + ")");
        }
    }
} );
</code></pre>

<p>I would like to - very briefly - display each student's name until the ticket has been picked (i.e. <code>RewardPurchases.PurchasesArray[Num]</code> has been found), then I'd like it to stop and increase the font size (and probably say WINNER! above it or something).</p>

<p>Is this possible, and relatively simple, using jQuery?</p>

<p><strong>EDIT</strong></p>

<p>I have tried the following code, which simply displays a single name. Where am I going wrong?</p>

<pre><code>$('button#random').click( function() {
    var Num = Math.floor(Math.random() * Total);

    for (var i in RewardPurchases.PurchasesArray) {

        if (typeof RewardPurchases.PurchasesArray[i] === 'object' &amp;&amp; typeof RewardPurchases.PurchasesArray[i] !== null) {

            $('#display').queue( function() { 
                $(this).text(RewardPurchases.PurchasesArray[i].Student_Name.toUpperCase()).show().delay(250); 
                $(this).dequeue();
            } );

        }

        if (i == Num) {
            var TutorGroup = '';

            Frog.API.get('timetable.getClasses',
            {
                'params': {'student': RewardPurchases.PurchasesArray[i].Student_ID },
                'onSuccess': function(data) {
                    for (var i = 0; i &lt; data.length; i++) {
                        if (data[i].subject.name == "Tut Period") {
                            TutorGroup = data[i].name.replace("/Tp", "");
                        }
                    }
                }
            });

            break;
        }
    }
} );
</code></pre>

<p>Thanks in advance,</p>
