Пытаясь улучшить свою очередь jQuery анимацию


Поэтому я построил маленький бейсбол "скаутинг отчет" график, который показывает статистику игроков. Как вы пролистывать игроков, их изображения слайдов и графических. Я нашел способ сделать это с помощью очереди jQuery, и это довольно хорошо работает.

Одна неувязочка, когда графика не меняется от игрока с одной стороны тарелки в другую (из левши в правшу, например). А не плавно скользящий, игрок просто появляется там.

Я не могу понять, почему это происходит. Переходы всегда гладкие, когда они между игроками, которые летучая мышь на одной стороне.

Я лишил этот код вниз, чтобы, по существу, только те части, которые имеют дело с очередью анимации/скольжения. Не могли бы вы посмотреть и показать мне областях, где она может быть улучшена?

Вы можете увидеть его в действии здесь: 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);

}


362
4
задан 16 октября 2011 в 08:10 Источник Поделиться
Комментарии
1 ответ

Я думаю, вы должны сохранить его простым. Это кажется гораздо более сложным, чем это необходимо.

Например, почему вы удаляете и снова создаете?:

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);

Я бы подошел к этому по-разному. Во-первых, сделает ваши игроки в буквальном объекты:

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'
}
];

Таким образом, вы не должны помнить, какая информация в каком элементе списка.

Затем создайте функции:


  • рядом со стрелками нажмите кнопку: moveNextPlayer

  • предыдущая стрелку нажать: movePrevPlayer

  • Выберите На изменить: moveToPlayer

и один для анимации называется _movePlayers(toPlayerIndex)

вот jsfiddle, чтобы вы начали: http://jsfiddle.net/Skt6F/

Редактировать:- далее по объектам вопрос ... у вас есть:

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] = ...

Его еще лучше:

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
}

];

2
ответ дан 17 октября 2011 в 06:10 Источник Поделиться