Thursday, July 16th, 2009

Swipe away, then quickly flip with simple jQuery plugins

Category: iPhone, jQuery

Ryan Scherf has created a simple jQuery plugin that “uses Mobile Safari’s built in touch events to allow jQuery binding of swipe events to any DOM element. You can override the swipeLeft and swipeRight defaults functions to create your own custom process when the gesture is detected.”

It can be used as simple as:


  1. $('.swipe').swipe({
  2.      swipeLeft: function() { $('#someDiv').fadeIn() },
  3.      swipeRight: function() { $('#someDiv').fadeOut() },
  4. })

You can tweak the threshold for the swipe, and take a peak at the demo which is shown here:

Jon Raasch has also updated his QuickFlip plugin that flips any piece of HTML like a card. The flip effect is similar to the UI animation on the iPhone, and uses an animation trick that is barely noticeable when fired quickly.

QuickFlip 2 resolves a number of usability and performance issues in
QuickFlip. The $.quickFlip() function can now be chained from any
jQuery selector, attaching all the styling and markup it needs
automatically. Additionally a new $.quickFlipper() function makes
triggering the flip effect a piece of cake. Other than that, minor
bugs have been fixed and performance has been tuned.

For more info:

Posted by Dion Almaer at 6:22 am

2.4 rating from 45 votes


Comments feed TrackBack URI

Open Web out the window then?

Comment by Darkimmortal — July 16, 2009

Leave a comment

You must be logged in to post a comment.