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

Question

过去一周我一直生病而且非常无聊，所以我决定自学更多关于编写 jQuery 插件的知识。我在大约半小时内将这个放在一起，当您按住 i(Phone|Pad|Pod Touch) 中的特定图标时，它会模拟“摆动”效果。要让它开始“摆动”很容易，我只是使用了 CSS3 过渡。

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

然而，要让图标停止摆动已被证明有点困难。我对创建 jQuery 插件相当陌生，所以我不是 100% 清楚如何保存所收集对象的状态，然后稍后通过回调或事件修改所述状态。

因此，我最终创建了一个数组，用于收集所有匹配的对象。然后我使用这个数组或多或少地维护应用了摆动效果的对象的状态。

尽管它有效，但它似乎过于低效，这让我相信有更好的，也许是内在的(在 jQuery 中)方法来完成这项工作。

有人可以看看这个简单的插件并告诉我我能做什么吗？我不是要别人改进我的代码。也许现实世界中的一个工作示例或一些可靠的文档就足够了。

非常感谢! :)

插件来源:http://area51.thedrunkenepic.com/wiggle/wiggle.jquery.js

Answer 1

您可以将 setTimeout 结果存储在每个对象中，如下所示:

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

然后在您的停止函数中，对其调用 clearTimeout，如下所示:

clearTimeout(object.timeout);

包含这些更改的完整插件如下:

(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);

我不知道像这样在对象中存储自定义数据是否是个好习惯，但是嘿，它有效:)