1

簡単なアニメーションjQueryプラグインを作成しようとしています。主なアイデアは、要素を取得し、アニメーションのfpsとなる固定間隔で何らかの方法で繰り返し操作することです。

私はこれをイベントを通して達成したかったのです。for（）やwhile（）のようなループを使用する代わりに、イベントをトリガーして特定のアクションを繰り返したいと思います。この背後にある考え方：最終的には、最初のアニメーションが完了したときに2番目のアニメーションを開始したり、1つのアニメーションシーケンスが特定のフレームにあるときに開始したりするなど、特定のイベントで複数のアクションを呼び出せるようにしたいと考えています。

今、私は次のことを試しました（プラグインの非常に単純化されたバージョン）：

(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 に答える