Здесь приведена пересмотренная версия ответа @Tayrn, которая может помочь вам понять, что немного упростить:
Это может быть не лучший способ сделать это, но это помогло мне обернуть голову как сворачивать таблицы.
ID = строки, которые вы хотите свернуть
MY_KEY = столбец, который вы выбираете из исходной таблицы, которая содержит имена столбцов, которые вы хотите развернуть.
VAL = значение, которое вы хотите возвращать под каждым столбцом.
MAX (VAL) => Может быть заменен другими вспомогательными функциями. SUM (VAL), MIN (VAL), ETC ...
DECLARE @cols AS NVARCHAR(MAX),
@query AS NVARCHAR(MAX)
select @cols = STUFF((SELECT ',' + QUOTENAME(MY_KEY)
from yt
group by MY_KEY
order by MY_KEY ASC
FOR XML PATH(''), TYPE
).value('.', 'NVARCHAR(MAX)')
,1,1,'')
set @query = 'SELECT ID,' + @cols + ' from
(
select ID, MY_KEY, VAL
from yt
) x
pivot
(
sum(VAL)
for MY_KEY in (' + @cols + ')
) p '
execute(@query);
Поскольку у вас есть анимация, примененная к классу jump
, значение offsetTop
фактически изменяется при добавлении этого класса. Таким образом, вы не должны зависеть от offsetTop
, и вместо этого вы должны использовать независимую переменную, которую вы установили сами, имея offsetTop
в зависимости от it . Сначала установите его на offsetTop
, но затем увеличивайте его, а не увеличивайте offsetTop
, а затем установите для него top
. Это, вероятно, сбивает с толку, поэтому позвольте мне опубликовать некоторый код.
Вы добавили бы это вокруг начала вашего скрипта.
var positionHorseUp;
Затем это к вашему событию загрузки.
positionHorseUp = horse[0].offsetTop;
Затем вы удалите эту строку ...
var positionHorseUp = horse[0].offsetTop;
... и замените ту, которая устанавливает положение top
с этим.
horse[0].style.top = ++positionHorseUp + 'px';
Таким образом, ничто не зависит от значения offsetTop
, и вы можете безопасно применять эту анимацию без прерывания сохраненной позиции лошади.
(Также используйте requestAnimationFrame
, а не setTimeout
.Это более эффективно, потому что оно вызывается на каждой лакокрасочной рамке. Добавьте соответствующий код, чтобы компенсировать неопределенные интервалы времени между средами браузера.)