jQuery Shake Plugin to, er, Make Elements Shake

I wanted to make a submit button shake back and forth when the form input is invalid, signaling the user that there was a problem. Simple enough. So I googled around for an existing solution, but the jquery plugins I found only made elements vibrate like crazy. I wanted a left-right shake.

Well it turned out to be very easy to implement myself.  Minified, my shake jquery plugin is less than 0.5KB.  Here’s a demo page.  Here’s the code:

(function($) {
    'use strict';

    //the plugin call
    $.shake = $.fn.shake = function(options) {
        if (this.length !== 0) {
            //initialize settings & vars
            var settings = $.extend(
                {   distance:   12,
                    iterations: 3,
                    duration:   160,
                    easing:     'swing'},
                options),
                $shakeThis = this;

            return $shakeThis.each(function(i, el) {
                var $el = $(el),
                    marg = ($el.parent().width() / 2) - ($el.outerWidth() / 2);

                $el.css('margin-left', marg);
                for (var j = 0; j < settings.iterations; j++)
                    leftRight($el, marg);

                $el.animate({'margin-left': marg}, settings);
            });
        }

        function leftRight($el, marg) {
            $el.animate({'margin-left': (marg - settings.distance)}, settings)
               .animate({'margin-left': (marg + settings.distance)}, settings);
        }
    };

})(jQuery);

It relies on the margin-left CSS property to do the shaking, so the element you want to shake cannot be inline. If you’re centering with “margin: auto”, that will work fine with this plugin. Your shaken element will return to its starting position.

You can use it like this:

if (/*invalid condition*/) {
    //shake the button
    $('input[type=button]').shake();
}

//shake more things
$('.shakeMe').shake({iterations: 10});

The plugin defaults are decent, but you can change them if you like. They are:

distance – the number of pixels to shake left and right from the home position.  Default is 12.

iterations – the number of left-right shakes to perform when the plugin is invoked.  Default is 3.

duration – the length of time, in milliseconds, that each left or right portion of the shake will take to complete.  Default is 160, which is moderately fast.

easing – the easing function to use.  jQuery comes standard with two: swing and linear.  Default is swing.  jQuery UI adds more easings, or you can include this plugin on your page to give yourself the same options (it’s much lighter weight than jQuery UI).  If you use one of these, ‘easeInQuart’ results in a head-nodding effect, and ‘easeOutElastic’ is pretty cool.  see the demos.

So if you’re looking for a small-sized jQuery plugin to shake buttons, divs, and other HTML elements back and forth, give this one a try.