So I built a little baseball "scouting report" graphic that shows stats for players. As you page through the players, their images slide in and out of the graphic. I worked out a way to do this using a jQuery queue, and it works fairly well.
The one hitch is when the graphic is changing from a player on one side of the plate to the other (from a lefty to a righty, for example). Rather than smoothly sliding in, the player just appears there.
I can't work out why that is happening. The transitions are always smooth when they are between players who bat on the same side.
I have stripped this code down to essentially just the parts that deal with the animation queue/sliding. Could you take a look and show me areas where it could be improved?
You can see it in action here: http://dl.dropbox.com/u/27409695/mlb-scouting/baseball-test.html
testArray = [];
testArray[0] = ['Andrus','XXX','R'];
testArray[1] = ['Beltre','XXX','R'];
testArray[2] = ['Chavez','XXX','L'];
testArray[3] = ['Hamilton','XXX','L'];
jQuery(document).ready(function($) {
buildSelectList();
$('playerPhoto').hide();
$('#scoutSelect').live('change', function(event) {
var userChoice = $(this).val();
if ( userChoice === 'Choose player' ) {
return false;
}
else if (!$('*').is(':animated')) {
playerQueue(userChoice);
}
});
$('.arrow').live('click', function(event) {
var player = $(this).attr('player');
if (player !== null && !$('*').is(':animated') ) {
playerQueue(player);
}
});
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js', function(){
startUp();
});
});
function buildSelectList() {
var playerLength = testArray.length;
for (i=0; i < playerLength; i++ ) {
jQuery('<option value="'+i+'">'+testArray[i][1]+' '+testArray[i][0]+'</option>').appendTo('#scoutSelect');
}
}
function startUp() {
var theQueue = jQuery('#scouting');
var thisPlayerL = jQuery('#playerPhotoL');
var thisPlayerR = jQuery('#playerPhotoR');
var playerHand = testArray[0][2];
theQueue.queue('josh', function() {
buildPlayer(0);
theQueue.dequeue('josh');
});
theQueue.queue('josh', function() {
if (playerHand === 'R') {
thisPlayerR.switchClass('offstage','onstage',1500);
}
else if (playerHand === 'L') {
thisPlayerL.switchClass('offstage','onstage',1500);
}
theQueue.dequeue('josh');
});
theQueue.dequeue('josh');
}
function playerQueue(playerID) {
var theQueue = jQuery('#scouting');
var thisPlayerL = jQuery('#playerPhotoL');
var thisPlayerR = jQuery('#playerPhotoR');
var playerHand = testArray[playerID][2];
theQueue.queue('josh', function() {
if (thisPlayerL.hasClass('onstage') ) {
thisPlayerL.switchClass('onstage','offstage',1500);
}
else if (thisPlayerR.hasClass('onstage') ) {
thisPlayerR.switchClass('onstage','offstage',1500);
}
theQueue.dequeue('josh');
});
theQueue.queue('josh', function() {
setTimeout("buildPlayer("+playerID+")",1500);
theQueue.dequeue('josh');
});
theQueue.queue('josh', function() {
if (playerHand === 'R') {
thisPlayerR.switchClass('offstage','onstage',1500);
}
else if (playerHand === 'L') {
thisPlayerL.switchClass('offstage','onstage',1500);
}
theQueue.dequeue('josh');
});
theQueue.dequeue('josh');
}
function buildPlayer(playerID) {
var testArraySize = testArray.length;
// make sure playerID is an integer not a string
playerID = parseInt(playerID,10);
// update the arrows' player IDs
var prevPlayer = '';
var nextPlayer = '';
if ((playerID > 0) && (playerID < testArraySize-1)) {
prevPlayer = playerID - 1;
nextPlayer = playerID + 1;
}
else if (playerID === 0) {
prevPlayer = testArraySize-1;
nextPlayer = 1;
}
else if (playerID === testArraySize-1) {
prevPlayer = playerID - 1;
nextPlayer = 0;
}
jQuery('#prevArrow').attr('player',prevPlayer);
jQuery('#nextArrow').attr('player',nextPlayer);
// player info
jQuery('#scouting h1').text(testArray[playerID][0]);
showPlayer(playerID);
}
function showPlayer(playerID) {
jQuery('#playerPhotoL img').remove();
jQuery('#playerPhotoR img').remove();
var playerName = testArray[playerID][0];
var playerHand = testArray[playerID][2];
jQuery('<img src="http://dl.dropbox.com/u/27409695/mlb-scouting/lineup/Rangers/'+playerName+'.png" />')
.appendTo('#playerPhoto'+playerHand);
}