Блог

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

Есть jQuery mobile: http://jquerymobile.com /

Кроме того, анимация CSS3 в соответствии с комментарием Андреасала. Используйте их вместо JavaScript, где это возможно.

Полезная статья для анимации CSS3 с «обычными» (не мобильными) резервными вариантами jQuery; должно быть применимо к вашему сценарию: http://addyosmani.com/blog/css3transitions-jquery / Однако обратите внимание, что многие мобильные устройства имеют ограничение на размер кэша, которое превышается «обычным» jQuery. Не уверен насчет iPad.

[обновление следует]

Я наткнулся Zepto.js довольно давно, но забыл об этом, ТАК что отвечайте, пока кто-нибудь не наткнулся на него. Во многих случаях Zepto.js является заменой мобильных приложений на основе jQuery. Он совместим не только с мобильными устройствами в ограниченной степени (на самом деле он предназначен для webkit, браузеров по умолчанию для iOS и Android), но я бы не стал полагаться на него для пользователей настольных компьютеров. Вы могли бы использовать условный предварительный загрузчик (require.js ?), чтобы загрузить jQuery для настольных компьютеров и Zepto для мобильных устройств.

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

[дальнейшее обновление]

Если вы выполняете обнаружение пользовательского агента или это будет ТОЛЬКО для iOS и Android, также есть это:

http://www.jqmobi.com/

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

смотрите здесь

Возможно, вы захотите попробовать снизить частоту обновления анимации, что вы можете сделать следующим образом:

 //animate memory hog fix
jQuery.fx.prototype.custom = function(from, to, unit) {
    this.startTime = now();
    this.start = from;
    this.end = to;
    this.unit = unit || this.unit || "px";
    this.now = this.start;
    this.pos = this.state = 0;
    var self = this;
    function t(gotoEnd) {
        return self.step(gotoEnd);
    }
    t.elem = this.elem;
    if (t() amp;amp; jQuery.timers.push(t) amp;amp; !jQuery.fx.prototype.timerId) {
        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 75);
    }
}
  

Измените 75 в этой последней строке на то, что вы хотите. Также будьте осторожны с тем, что вы анимируете, просто попробуйте делать что-то одно за раз. Непрозрачность всегда занимает много памяти, поэтому попробуйте заменить эффекты слайдов там, где это возможно.

Я использую плагин jQuery Animate Enhanced от Бена Барнетта