如何停止jQuery动画插件？ 有一个更好的方法来做到这一点

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 :)

Answer 2

I suggest that you check if the targeted element is already wiggling before you animate it again, because a user can spam your start button, and your elements would stock the animations.
The animation wont be the desired one and the browser may crash.
Another thing is to maintain chainability : your plugin breaks the jquery chain and one won't be able do use something like $(selector).wiggle().doSomethingElse(); because your plugin is returning nothing after its execution ( return; ).
With the few modifications the plugin would look like :

(function($){
$.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);
            $(object).data('wiggling',true);
        },
        stop: function(object) {
            $(object).css({
                '-webkit-transform': 'rotate(0deg)',
                '-moz-transform': 'rotate(0deg)'
            });
            clearTimeout(object.timeout);
            $(object).data('wiggling',false);
        }
    };

    this.each(function() {
        if($(object).data('wiggling') == true && (method == 'start' || method === undefined)) {
            methods.rotate(this);
        } else if (method == 'stop') {
            methods.stop(this);
        }
    });
    return this;
}
})(jQuery);