Implementing jQuery's shake effect with animate

Question

I\'ve been given a cut down subset of the jQuery lib one of the key features I\'m missing is the .effect functions. I do however have .animate. I w

Answer 1

This is probably irrelevant now but I've ported jQ UI's shake effect as a standalone jQuery plugin. All you need is jQuery and it will work exactly like the one provided in jQ UI.

For those who want to use the effect without actually bloating their project with unnecessary jQ UI core files.

$('#element').shake({...});

It can be found here with instruction: https://github.com/ninty9notout/jquery-shake

Thought I'd leave this here for future reference.

Answer 2

It's actually already implemented this way under the covers, you can see exactly how in jquery.effects.shake.js, if you wanted to copy only that functionality you can.

Another approach to think about: if you're using multiple effects, I'd recommend downloading jQuery UI with only the effects you want. For this effect, without copying the functionality yourself, you would just need jquery.effects.core.js and jquery.effects.shake.js.

Answer 3

Based on @el producer solution, I added some multiply logic and make it look like a random shake.

jQuery.fn.shake = function (interval, distance, times) {
    interval = typeof interval == "undefined" ? 100 : interval;
    distance = typeof distance == "undefined" ? 10 : distance;
    times = typeof times == "undefined" ? 3 : times;
    var jTarget = $(this);
    jTarget.css('position', 'relative');
    for (var iter = 0; iter < (times + 1) ; iter++) {
        jTarget.animate({ top: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)), left: ((iter % 2 == 0 ? distance * Math.random() : distance * Math.random() * -1)) }, interval);
    }
    return jTarget.animate({ top: 0 , left: 0 }, interval);
}