Как ускорить все анимации jquery? - PullRequest
0 голосов
/ 17 декабря 2011

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

Другими словами. Как бы выглядела эта волшебная tick функция?

var el = $('selector');
log(el.css("left"));            // 10

el.animate({left:"-=5"}, 1000);

log(el.css("left"));            // ≈10
jQuery.tick(1000);              // accelerate
log(el.css("left"));            // 5

Недостаточно просто использовать setInterval и setTimer.

Обновление

Я принял ответ @ jfriend00 для прямой привязки к скорости анимации jquery (потрясающе). Однако для модульного тестирования этого должно быть достаточно, чтобы просто отключить движок FX. +1 за эти ответы!

Ответы [ 4 ]

3 голосов
/ 17 декабря 2011

Самое первое, что делает существующая функция animate, - это вызывает jQuery.speed(), чтобы отсортировать различные параметры аргумента до animate(), чтобы выяснить, какая скорость и другие параметры.Вы можете подключиться к этой функции и изменить скорость на более короткое значение.

jQuery.oldSpeed = jQuery.speed;
jQuery.speed = function() {
    var opt = jQuery.oldSpeed.apply(this, arguments);
    opt.duration = Math.floor(opt.duration / 10);
    return(opt);        
}

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

Вы можете увидеть эту работу здесь: http://jsfiddle.net/jfriend00/6JUGu/. После нажатиякнопка «Перейти быстрее», следующий цикл анимации начнется с более высокой скоростью.

2 голосов
/ 17 декабря 2011

Под предлогом модульного тестирования , я предполагаю, что вы хотите пропустить все анимации , но при этом сохранить ожидаемые эффекты?

Если это то, что вы хотите, вы можете просто установить $.fx.off = true, и это глобально отключит все анимации jQuery с анимацией или анимацией, но все они по-прежнему будут доведены до логического конца. Так что .animate() становится практически таким же, как .css() из-за отсутствия анимации.

Если вы ищете что-то более модульное, вы можете вместо этого вызвать .stop(bool,bool) для ваших элементов. Например, передача true для второго аргумента останавливает текущую анимацию на выбранных элементах и переходит к логическому концу анимации.

1 голос
/ 17 декабря 2011

Я думаю, вам нужно либо установить множитель времени для каждой анимации (вероятно, не вариант)

, либо вы можете установить $.fx.off = true; (http://api.jquery.com/jQuery.fx.off/), чтобы сразу увидеть разницу. (вы не увидите ускорения, просто мгновенное изменение).

0 голосов
/ 17 декабря 2011

Или просто уменьшить продолжительность до 1000? :)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...