jQuery Wiggle plugin

Documentation

Overview

The jQuery Wiggle is a jQuery plugin written by Marius Stanciu - Sergiu for Userdot, a plugin that allows you to emulate the wiggle effect icons on an iPhone have when you press and hold down on them. Click on the image to the right to see the effect.

Download

You can download the last version of the plugin, or browse the archive for older versions.

Usage

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


                                        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

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


                                        <script type="text/javascript" src="js/jquery.wiggle.js"></script>

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


                                        <img class="wiggle" src="images/demo/image1.jpg" />

                                        <img class="wiggle" src="images/demo/image2.jpg" />

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


                                        <script type="text/javascript">

                                        $(document).ready(function(){

                                           $('.wiggle').wiggle();

                                        });

                                        </script>

Options

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."

limit - allows you to specify the maximum number of wiggles.

randomStart - a boolean value which tells the plugin to start wiggling all matched elements at the same degree or a random one.

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.