Trying to improve my jQuery animation queue

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 '+testArray[i][1]+' '+testArray[i][0]+'').appendTo('#scoutSelect');
}
}

function startUp() {
var theQueue = jQuery('#scouting');
var thisPlayerL = jQuery('#playe

I think you need to keep it simple. This seems much more complicated than need be.

For example why are you removing and then creating again?:

jQuery('#playerPhotoL img').remove();
jQuery('#playerPhotoR img').remove();

var playerName = testArray[playerID][0];
var playerHand = testArray[playerID][2];

jQuery('')
    .appendTo('#playerPhoto'+playerHand);

I would approach this differently. Firstly make your players into literal objects:

var players = [{
        'name': 'Andrus',
        'somethingelse': 'XXX',
        'hand': 'R'
    },
    {
        'name': 'Beltre',
        'somethingelse': 'XXX',
        'hand': 'R'
    },
    {
        'name': 'Chavez',
        'somethingelse': 'XXX',
        'hand': 'L'
    },
    {
        'name': 'Hamilton',
        'somethingelse': 'XXX',
        'hand': 'L'
    }
];

This way you don't have to remember what information is in what element of the list.

Then creat functions:

• next arrow click: moveNextPlayer

• prev arrow click: movePrevPlayer

• Select on change: moveToPlayer

and one to animate called _movePlayers(toPlayerIndex)

here is a jsfiddle to get you started: http://jsfiddle.net/Skt6F/

EDIT:- further on the objects issue ... you have:

testArray = [];
testArray[0]  = ['R',0.169,0.311,0.236,0.288,0.436,0.314,0.27,0.35,0.232,20,26,15,27,null,15,26,31,16,0.253,0.443,0.268,0.353,0.473,0.357,0.348,0.447,0.232,28.9,12.4,14.7,9.6,14.3,20.1,0.288,0.283,0.303,0.225,0.229,0.214,0.254,0.241,0.348,0.231,0.242,0.219,59.9,42.2,12.5];
testArray[1]  = ['Beltre','Adrian','R',];
testArray[2]  = ...

Its still better to have:

var playerData = [{ 'firstName': 'Andrus', 'lastName':'Elvis', 'hand': 'R', 'stats':
        [0.263,0.372,0.285,0.337,0.527,0.302,0.323,0.344,0.329,28,40,31,35,null,38,29,45,34,0.491,0.755,0.416,0.742,1.194,0.55,0.569,0.689,0.519,23.5,7.6,8,22.3,17.8,20.7,0.325,0.323,0.33,0.245,0.267,0.174,0.275,0.269,0.318,0.293,0.205,0.358,38.5,60.4,12.1]
    },
    { 'firstName': etc
    }

];

StackExchange Code Review Q#5401, answer score: 2