iOS-Like Icons Wiggle Effect - Wiggle

File Size: 137 KB
Views Total: 3499
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
iOS-Like Icons Wiggle Effect - Wiggle

A cool jQuery Animation Plugin that emulates the wiggle effect icons on an iOS Device have when you press and hold down on them. 

How to use it:

1. Include jQuery Library and jquery.wiggle.js

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

2. Markup

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

3. Call the plugin

<script type="text/javascript">
$(document).ready(function(){
   $('.wiggle').wiggle();
});
</script>

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

5. Method

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

This awesome jQuery plugin is developed by class.pm. For more Advanced Usages, please check the demo page or visit the official website.