jQuery Shake

The shake effect from jQuery UI extracted to be used as a standalone plugin.

I needed to use the shake effect for a login page for a project inspired by the WordPress admin login page but I thought it silly to include the entirety of jQuery UI just for one effect, thus, I decided to extract the effect and have it work completely independent from jQuery UI.

Vanilla jQuery is required for this to work, along with the easing plugin if you want to use the easing functions.

From the jQuery UI docs:

Description

Shakes the element multiple times, vertically or horizontally

Options

direction (default: “left”)
Type: String
A value of “left” or “right” will shake the element horizontally, and a value of “up” or “down” will shake the element vertically. The value specifies which direction the element should move along the axis for the first step of the effect.

distance (default: 20)
Type: Number
Distance to shake.

times (default: 3)
Type: Number
Times to shake.

speed (default: 140)
Type: Number
Animation duration.

easing (default: “easeInOutSine”)
Type: String
The easing function to use.

callback (default: none)
Type: function
The callback function to use after animation end.

Usage

Without options

<div id="shake-me-default">Click Me</div>

$(document).ready(function() {
	$('#shake-me-default').on("click", function() {
		$(this).shake();
	});
});

With options

<div id="shake-me-option">Click Me</div>

$(document).ready(function() {
	$('#shake-me-option').on("click", function() {
		$(this).shake({
			direction: "up",
			distance: 50
		});
	});
});

With callback

<div id="shake-me-callback">Click Me</div>

$(document).ready(function() {
	$('#shake-me-callback').on("click", function () {
		$(this).shake(function () {
			alert('callback');
		});
	});
});