Я пытаюсь анимировать две строки таблицы, чтобы, когда общее значение второй строки стало меньше, чем первая строка, две строки поменялись местами. Когда я жестко кодирую идентификатор элемента tr, анимация работает отлично. Однако, если я динамически даю идентификатор строки таблицы, анимация портится, так как нижняя строка толкает верхнюю строку в направлении вверх. Я добавляю строки таблицы во время выполнения, поэтому приведенный ниже текст пуст. Уровень [i] содержит «b». Любая помощь будет оценена. Я использую jquery 1.4.4.
js
//Not working
$("#" + level[i] + "row").animate({ top: '-50px' }, 2000, function () {
$("#" + level[i] + "row").prev().animate({ top: '50px' }, 2000, function () {
});
});
//working
$("#brow").animate({ top: '-50px' }, 2000, function () {
$("#brow").prev().animate({ top: '50px' }, 2000, function () {
});
});
Html таблица
<table id="main_table" class="table table-bordered">
<thead>
<tr>
<th>Level</th>
<th>Name</th>
<th>Total</th>
</tr>
</thead>
<tbody id="messagesList"></tbody>
</table>
Выход: Рабочий 
Неправильная анимация 
ОБНОВЛЕНИЕ Итак, я понял, в чем проблема. Анимация не происходит как как только функция анимации нажата . По сути, я отправляю пользовательское событие в for l oop, которое вызовет функцию animate, а l oop будет выполнять итерацию только в том случае, если мои строки не в правильном порядке. Но поскольку строки анимируются не сразу и не устанавливается в правильном порядке , функция animate вызывается дважды и влияет на обе строки, а не просто на одну. Так есть ли способ, как я могу сделать анимацию, как только функция анимации нажата?