Subtle Wiggle/Shake Animation In jQuery - wiggle.js

Subtle Wiggle/Shake Animation In jQuery - wiggle.js
File Size: 4.25 KB
Views Total: 101
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

wiggle.js is an ultra-light (700 bytes minified) jQuery plugin that enables you to apply a configurable Wiggle (Shake) animation to relatively-positioned elements using jQuery's animate() method.

How to use it:

1. Download and insert the minified version of the wiggle.js plugin after loading the latest jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/jquery.wiggle.min.js"></script>

2. Enable the Wiggle animation on the element you specify.

<div class="box">
  Wiggle.js Demo
</div>
$(function(){
  $(".box").wiggle();
});

3. Set the animation speed. Default: 50.

$(function(){
  $(".box").wiggle({
    speed: 100
  });
});

5. Set the number of times to wiggle. Default: 3.

$(function(){
  $(".box").wiggle({
    wiggles: 5
  });
});

6. Set the number of pixels to move. Default: 5.

$(function(){
  $(".box").wiggle({
    travel: 10
  });
});

7. Trigger a function when the animation finishes.

$(function(){
  $(".box").wiggle({
    callback: function(){
      // do something
    }
  });
});

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