I'm trying to find a method or a plugin that will replicate the effect in iOS App where you can slide from left or right and it will lock onto the next pane when lift your finger if you've slid enough in that direction.
How to have it know when you've scrolled enough and then set the new position to focus on? Is there a good jQuery plugin for this kind of thing? jQuery Mobile doesn't seem to have this sort of feature.
The layout that I have in mind is like 4-5 DIVS next to each other inside side a single DIV with maybe overscroll set to hidden. Then when you start to slide over to the next pane it can fire of an Event that changes the left/right CSS position with some Transition effect and then also update the tab to show that new new pane is selected.
you should use touchstart/mousedown,touchmove/mousemove and touchend/mouseup events for this purpose to support both touch and desktop devices.
Now comes the tricky part: use these new X and Y position to calculate the displacement and direction. Use these value to either set offset of your DIV(s) or use CSS 3.0 translate(x,y).
For instance if delta X > 10 (some threshold value to filter mistakes) and delta Y ~ 0 then its movement to the right. I would translate all my DIVs to RIGHT by delta X.
I would suggest not to use any Animation 'cause it will not look as per your needs. Plus keep transition delay very short and probably no timing function. This will give some crisp reflexes on movement.
For the Problem of when to assume "Its Enough sliding", I guess you will have to take constant value of your choice or calculate it using screen width. If Delta X or delta Y is not less than a thresh hold value... bounce back. If it is greater than this value...bounce forward.