Time for action – wiring up the controls

All that's left to do is add the event handlers to the left and right links at the bottom of the widget so that the different images can be viewed. After the two skew functions, add the following code:

viewer.find("#left a").click(function(e) {
  e.preventDefault();
  skewRTL();
});
viewer.find("#right a").click(function(e) {
  e.preventDefault();
  skewLTR();
});

What just happened?

All we do is add a click handler to each link which prevents the link from being followed with preventDefault() and then call the relevant skew function. The example should now be fully working in all common browsers, although the effect is handled rather badly by IE in general, with slower, more sluggish animations, less accurate ...

Get jQuery 1.4 Animation Techniques Beginner's Guide now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.