1

我正在尝试构建一个简单的动画 jQuery 插件。主要思想是获取一个元素并以某种方式在固定的间隔内重复操作它，这将是动画的 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() 中“手动”触发它们（我不喜欢，因为这将是完全不同的事情——从插件外部控制动画。相反，我想使用事件在插件内部具有一定程度的“自我控制”）。我觉得我错过了一些关于自定义事件的基本知识（注意：我对此还是很陌生）以及如何使用它们......

感谢您的帮助。

解决方案：

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

代替

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

我不得不这样做：

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

所以必须在任何事件被触发之前调用事件监听函数，这当然很有意义......

4

1 回答 1

1

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

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

});

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

您的 DOM 元素应该知道他应该何时触发您的触发器。

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

于 2012-09-26T09:13:22.127 回答