ClassyWiggle
Wiggleicious!

Introduction

ClassyWiggle is a jQuery plugin that allows you to emulate the wiggle effect icons on an iPhone have when you press and hold down on them.

Download it

License

This jQuery plugin is distributed under the MIT license. Enjoy!

Demo

Calculator Calendar Camera Clock Contacts iPod iTunes Mail Maps Music Notes Phone Safari Settings SMS YouTube
   

Setup

First you need to include the jQuery library, since ClassyWiggle is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

Secondly, you need to include the jQuery ClassyWiggle javascript file into your page. You can do it by adding the code below to your page.

Next, you create the image tag that you want to apply wiggle on.


As the last step, you trigger the ClassyWiggle() function on the element you just created. In this case, we trigger the function on the image with the class wiggle.

$(document).ready(function() {
    $('.wiggle').ClassyWiggle();
});

Options

  • Parameters


  • degrees - an Array object which outlines the cycle of rotation for a wiggle increment
  • delay - allows you to specify, in milliseconds, the delay between switching from one rotation degree to the next (see degrees); a higher number creates a slower "wiggle", default is 35
  • limit - specify the maximum number of wiggles, default is null which means infinite wiggles
  • randomStart - boolean value which tells the plugin to start wiggling all matched elements at the same degree or a random one, default is true
  • Callbacks


  • onWiggle - an event that is fired off with the end of each wiggle
  • onWiggleStart - an event that is fired off when the wiggling effect first starts
  • onWiggleStop - an event that is fired off when the wiggling effect is stopped
  • Methods


  • start() - starts the wiggle effect
  • stop() - stops the wiggle effect
  • isWiggling() - a method that can be used to determine if the matched element is currently "wiggling"