Question

I’ve been sick for the past week and terribly bored, so I decided to teach myself a bit more about writing jQuery plugins. I threw this one together in about half an hour and it emulates the “wiggle” effect when you press and hold down on a particular icon within an i(Phone|Pad|Pod Touch). To get it to start “wiggling” was easy enough, I just used CSS3 transitions.

http://area51.thedrunkenepic.com/wiggle/

However, to get the icons to STOP wiggling has proven to be a bit more difficult. I’m fairly new to creating jQuery plugins, so I’m not 100% clear on how to save the state of collected objects and then modify said state later on by, say, a callback or event.

So, I wound up creating an array which is used to collect all matched objects. I then use this array to maintain, more or less, the state of the objects which have the wiggle effect applied.

Even though it works, it seems overly inefficient which leads me to believe there is a better, perhaps intrinsic (within jQuery), way of getting this done.

Could someone take a look at this simple plugin and tell me what, if anything, I can do? I’m not asking for someone to improve my code. Perhaps a working example out in the real world or some solid documentation will suffice.

Thank you so much! 🙂

Plugin Source: http://area51.thedrunkenepic.com/wiggle/wiggle.jquery.js

Answer 1

You could store the setTimeout result in each object, like so:

object.timeout = setTimeout(function(){
methods.rotate(object, step+1);
}, options.delay);

Then in your stop function, call clearTimeout on it, like so:

clearTimeout(object.timeout);

The full plugin incorporating these changes is as follows:

(function($){
var rotatingObjectCollection = [];

$.fn.wiggle = function(method, options) {
    options = $.extend({
        rotateDegrees: ['1','2','1','0','-1','-2','-1','0'],
        delay: 35
    }, options);

    var methods = {
        rotate: function(object, step){
            if(step === undefined) {
                step = Math.floor(Math.random()*options.rotateDegrees.length);
            }

            var degree = options.rotateDegrees[step];
            $(object).css({
                '-webkit-transform': 'rotate('+degree+'deg)',
                '-moz-transform': 'rotate('+degree+'deg)'
            });

            if(step == (options.rotateDegrees.length - 1)) {
                step = 0;
            }

            object.timeout = setTimeout(function(){
                methods.rotate(object, step+1);
            }, options.delay);
        },
        stop: function(object) {
            $(object).css({
                '-webkit-transform': 'rotate(0deg)',
                '-moz-transform': 'rotate(0deg)'
            });

            clearTimeout(object.timeout);
            object.timeout = null;
        }
    };

    this.each(function() {
        if((method == 'start' || method === undefined) && !this.timeout) {
            methods.rotate(this);
        } else if (method == 'stop') {
            methods.stop(this);
        }
    });
    return;
}
})(jQuery);

I don’t know if it’s good practice to store custom data inside the objects like this, but hey, it works 🙂