for(var i=0; i<barValues.length; i++) {


    actualBarHeight = Math.floor((barValues[i]/chartMaxY)*barchartHeight);

    var barChartID = "#barChart" + (i+1)
    $(barChartID + " .value span").css('background-color','transparent');
    $(barChartID + " img").animate({ 
            height: actualBarHeight
        }, 500, function(){$(barChartID + " .value span").css('background-color','white');}
    );

    $(barChartID + " .value span").html("$"+Math.floor(barValues[i]));
    $(barChartID + " .value").css("bottom",actualBarHeight+"px");
    $(barChartID + " .ylabel").html(chartMaxY);

};

Вышеупомянутый бит jQuery находится внутри цикла for. Каждая итерация цикла выполняет следующие действия:

устанавливает фон пролетаоживляет объектпо окончании сбрасывает фон пролета

Я использую функцию обратного вызова для сброса фона, чтобы он завершил анимацию, прежде чем сделать это. Однако это влияет только на последний диапазон, указанный в цикле for.

Если я перемещу этот бит кода за пределы обратного вызова, то он будет влиять на каждый промежуток через каждую итерацию цикла for (но в этом случае не ожидает анимацию)

Я предполагаю, что проблема связана с созданием селектора ВНУТРИ функции ВНУТРИ функции анимации. Есть ли какой-то плохой синтаксис в моей разметке?

РЕДАКТИРОВАТЬ (согласно предложению Русса, я включаю полный цикл в приведенный выше пример)