- Use zepto.js not jQuery.
- Use -webkit-transition and -webkit-transform wherever possible.
Especially useful if you are developing with PhoneGap/Cordova on iPad and iPhone, or Android. Those webkit transforms saved my bacon on a recent iPad project. Here is the basic CSS you want to put on an element you want to optimise:
-webkit-transition: -webkit-transform 0ms;
-webkit-backface-visibility: hidden;
Try replacing $(this).hide(); with a transform that moves the element off screen like this (might need overflow: hidden on your body tag):
$(this).css("-webkit-transform", "translateX(1500px)");
Then when you want to show the element again do this instead:
$(this).css("-webkit-transform", "translateX(0px)");
I also had great success replacing jQuery UI drag-and-drop code with something hand-rolled:
$(this).css("-webkit-transform", "translateX(" + relativeX + "px) translateY(" + relativeY + "px)");
Hope this helps you!