title: JS/jQuery - animated random name picker
body: <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>