JQuery animate не работает с переменными

Я занимаюсь jQuery. Я использовал ниже код в моем скрипте, который работает некорректно. Этот код вытягивает 9 изображений из DOM и преобразует изображения, основываясь на значениях, определенных в массиве arr_trans, и должен быть анимирован параллельно, поэтому я использовал queue: false.

for ( var i=0; i < $('.mc-item').length;i++) {

$('.mc-item').eq(i).animate({"-webkit-transform":"translate("+ arr_trans[i]+"px"+")"},{duration:100, queue:false});

}

arr_trans[] → содержит 9 различных значений для перевода каждого изображения в другое положение.

$('.mc-item') → получает 9 изображений из DOM

Вышеприведенный код работает, если я использую "CSS" вместо "animate". Заметьте, я бегу в браузере Chrome. Пожалуйста, порекомендуйте.

1 ответ

Согласно API jQuery (часть "Свойства и значения анимации") можно анимировать следующие свойства:

Все анимированные свойства должны быть анимированы до одного числового значения, кроме как указано ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы с использованием основных функций jQuery

Поскольку transform не является полным численным (translate()), аниматор не знает, как его интерпретировать.

Если нет плагина, я не знаю, что вам нужно реализовать анимацию самостоятельно, используя setTimeout и несколько .css -actions или использовать CSS3-анимации.

licensed under cc by-sa 3.0 with attribution.