CODEWITHSUNDEEP
jquery
Charlie
Charlie

Reputation: 11777

jQuery optimized for iPad?

I'm working on a web app for the iPad and most of the effects I've been using are from jQuery. Not all the animations are smooth though, which is why I'm wondering if there is a version of jQuery that is optimized to run smoother on the iPad?

Upvotes: 2

Views: 2569

Answers (4)

Greg Pettit
Greg Pettit

Reputation: 10830

There's jQuery mobile: http://jquerymobile.com/

Also, CSS3 animations as per AndreasAL's comment. Use those instead of JavaScript where possible.

Useful article for CSS3 animations with 'normal' (not mobile) jQuery fallbacks; should be applicable to your scenario: http://addyosmani.com/blog/css3transitions-jquery/ Note, however, that many mobile devices have a cache size limit that is exceeded by 'normal' jQuery. Not sure about iPad.

[update follows]

I came across Zepto.js quite a while ago but forgot about this SO answer until someone bumped it. In many cases, Zepto.js is a drop-in replacement for mobile jQuery-based applications. It is compatible beyond mobile to a limited degree (it's actually for webkit, which default browsers for iOS and Android use), but I wouldn't rely on it for desktop users. You could use a conditional preloader (require.js?) to load jQuery for desktop and Zepto for mobile.

Worst case, drop it in, see if it works for your needs; the syntax is jQuery-compatible so you won't need to modify your custom code just to see if it works.

[further update]

If you're doing user agent detection or this is ONLY going to be for iOS and Android, there's also this:

http://www.jqmobi.com/

Upvotes: 4

Xaver
Xaver

Reputation: 11652

I'm using jQuery Animate Enhanced Plugin by Ben Barnett

Upvotes: 1

Nico Westerdale
Nico Westerdale

Reputation: 2186

You might want to try dropping the refresh rate of the animations, which you can do like this:

//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() && jQuery.timers.push(t) && !jQuery.fx.prototype.timerId) {
        jQuery.fx.prototype.timerId = setInterval(jQuery.fx.tick, 75);
    }
}

Change 75 on that last line to whatever you want. Also be careful what you're animating, just try and do one thing at a time. Opacity is always a memory hog, so try substituting slide effects where you can.

Upvotes: 1

Tushar Ahirrao
Tushar Ahirrao

Reputation: 13115

Try this easing jquery plugins optimized for hard animation effects and gives you smooth animation effect

see here

Upvotes: 1

Related Questions