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

在过去的一周里，我一直在生病，非常无聊，所以我决定多教自己一些关于编写jQuery插件的知识。我在大约半个小时内完成了这一功能，它模拟了当你按住I（手机| Pad | Pod Touch）内的某个特定图标时的“摆动”效果。要让它开始“摆动”很容易，我只使用了CSS3转换

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

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

尽管它可以工作，但它似乎效率太低，这让我相信有一种更好的、也许是内在的（在jQuery中）方法来完成这项工作

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

非常感谢！：）

---

插件来源：

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

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

clearTimeout(object.timeout);

然后在stop函数中，调用clearTimeout，如下所示：

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

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

---

我不知道像这样在对象中存储自定义数据是否是一种好的做法，但是，它是有效的：）

我建议您在再次设置动画之前检查目标元素是否已经在摆动，因为用户可以垃圾邮件发送“开始”按钮，而您的元素将储存动画。
动画将不是所需的，浏览器可能会崩溃。
另一件事是保持链接性：你的插件破坏了jquery链，你将无法使用类似于

$（选择器）.wiggle（）.doSomethingElse（）的东西return；

）。
经过几次修改后，该插件看起来像：

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

---

我想jQuery的选择器可能对您有用，但您没有使用动画方法。谢谢！我必须查看：动画选择器，看看它是否对我有用。哇，谢谢！这实际上效果很好。代码行更少，占用空间更大。然而，当使用你的方法时，有一个奇怪但有趣的副作用。由于我们不检查“摆动”效果是否已应用于匹配的对象，因此多次单击“开始”可加快实际的“摆动”。您需要单击“停止”的次数与单击“开始”的次数相同，才能真正停止所有效果！英雄联盟嗯…哈哈，好地方。我想最简单的方法是清除stop方法中的timeout属性，并在调用rotate方法之前检查超时是否已设置。我已经编辑了上面的代码来反映这些变化。完美的胜利！！！那很有效！我会在应得的时候给予表扬。非常感谢！：）不用担心，顺便说一句，我真的很喜欢这个插件：）