Question

我很想建立一个简单的动画jQuery插件。主要思想是采用一个元素并以固定的intervall（动画的fps）重复地以某种方式对其进行操作。

我想通过活动来实现这一目标。我不想使用for（）或while（）这样的循环，而是希望通过触发事件来重复某些操作。这背后的想法：我最终希望能够在某些事件上调用多个动作，例如在第一个动画完成时启动第二个动画，或者甚至在一个动画序列在特定帧上时启动它。

现在我尝试了以下（插件的非常简化版本）：

(function($) {
    $.fn.animation = function() {
        obj = this;
        pause = 1000 / 12; //-> 12fps

        function setup(o) {
            o.doSomething().trigger('allSetUp');
        }

        function doStep(o, dt) {
            o.doSomething().delay(dt).trigger('stepDone');
        }

        function sequenceFinished(o) {
            o.trigger('startOver');
        }

        function checkProgress(o) {
            o.on({
                'allSetup': function(event) {
                    console.log(event); //check event
                    doStep(o, pause);
                },
                'stepDone': function(event) {
                    console.log(event); //check event
                    doStep(o, pause);
                },
                'startOver': function(event) {
                    console.log(event); //check event
                    resetAll(o);
                }
            });
        }

        function resetAll(o) {
            /*<-
                reset stuff here
            ->*/
            //then start over again
            setup(o);
        }

        return this.each(function() {
            setup(obj);
            checkProgress(obj);
        });
    };

})(jQuery);

然后我像这样调用动画：

$(document).ready(function() {
    $('#object').animation();
});

然后 - 没有任何反应。没有事件被解雇。我的问题：为什么？是不是可以在jQuery插件中使用这样的事件？我是否必须在$（document）.ready（）中触发它们'manualy'（我不喜欢什么，因为这将是一个完全不同的东西 - 从插件外部控制动画。相反，我想使用事件在插件内部，在插件内部具有一定程度的“自我控制”。我觉得我缺少一些关于自定义事件的基本信息（注意：我还是很新的）以及如何使用它们......

请求任何帮助。

解决方案：

事件处理和触发实际上有效，我只需要先调用checkProgress函数：

而不是

return this.each(function() {
  setup(obj);
  checkProgress(obj);
});

我必须这样做：

return this.each(function() {
  checkProgress(obj);
  setup(obj);
});

因此，在任何事件被触发之前必须调用事件监听功能，这当然是完全合理的......

Answer 1

例如，您需要在DOM模型上设置事件：

$('#foo').bind('custom', function(event, param1, param2) {
    alert('My trigger')

});

$('#foo').on('click', function(){  $(this).trigger('custom');});

你的DOM元素应该知道什么时候应该触发你的触发器。

请注意，在您的插件中，您不会调用任何内部函数 - ONLY DECLARATION

如何在jquery插件中使用事件和事件处理程序？

1 个答案: