The default jQuery Mobile page transitions are slide for pages and pop for dialogs. And on Android these can be sluggish and appear to flash on and off annoyingly. Turning off transitions is easy, well, once you know the code you need. The following (which is not overly clear in the docs) was given to me by fellow Adobian, and jQuery Mobile contributor, Kin Blas.
$(document).bind("mobileinit", function() {
$.mobile.defaultPageTransition = "none";
$.mobile.defaultDialogTransition = "none";
});
Simple, right? Well, there is one catch. The mobileinit event has to be bound before jQuery Mobile is loaded. In other words it needs to be after your code that loads jQuery, but before the code that loads jQuery Mobile. You can put it right inline, or in its own .js file, which you can include.
Preventing Annoying jQuery Mobile Page Transitions
4 responses to “Preventing Annoying jQuery Mobile Page Transitions”
-
How come these transitions work great on iOS?
-
Webkit on Safari has been ‘enhanced’. That is, some CSS transitions are hardware accelerated via the GPU. And that is only for some transitions on some iOS devices. This is one of the difficulties in making an animation work the same across multiple devices.
-
I personally find these to be very annoying even on iOS. If you start to do anything before the transition is finished, say start scrolling, they get all wacky. I’m also not a big fan of the loading spinners. They take what would be a normal wait for a page to load and make it seem longer by telling you, "you need to wait before this can happen". I don’t think it actually slows anything down but it perceives that it’s slower
-
Thanks very much. Going to give this a try now. The key tip here is to bind mobileinit before JQM is instantiated. I hadn’t tried that previously. The JQM doco is woefully misleading on disabling transitions–it recommends doing so from the CSS, which produces all sorts of nasty knock-on effects.
Leave a Reply