1

拡張された jQuery Plugin Boilerplateを使用して、プラグイン内で実行されているアニメーションを開始/停止するパブリック メソッドを持つプラグインを作成しています。このアニメーションは CSS アミン BTW ではありません。これは単なるカウンターであるため、それぞれの関数を使用して別のメソッドを起動できますstep。

アニメーションはinit()メソッド内から始まります。

Plugin.prototype = {
    init: function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element
        // and this.options
        // you can add more functions like the one below and
        // call them like so: this.yourOtherFunction(this.element, this.options).
        console.log('init');

        $({ i: 0 }).animate({ i: 1000 }, {
            duration: 1000
        ,   step:     function () { console.log(this.i); }
        });
    },
    stop: function () { //yourOtherFunction: function () {
        // some logic
        console.log('stop');

        $(this.element).clearQueue();
        $(this.element).stop();
    }
};

そして、のように呼び出されると、問題なく開始し$('.some-elements').wheels();ます。

パブリック関数を呼び出して、このアニメーションを一時停止または停止する方法が必要です。たとえば、次のようになります。

var timeout = window.setTimeout(function () {
    $('#total.cont-email-wheel').wheels('stop');
}, 500);

この例では、アニメーションが途中で停止します (タイムアウトなどの不正確さは理解しています) が、そうではありません。それが私がここにいる理由です！

注意:stop途中でコンソールにログが記録されるため、メソッドは適切に呼び出されています。

私が呼び出す必要があるjQueryドキュメントclearQueue()と、アニメーション化されているオブジェクトを見ると、これはかなり確信しています。この場合、要素ではなくstop()匿名オブジェクト（ ）ですが、方法がわからない{ i }これを行う。

どんな助けでも大歓迎です。できるだけ簡潔に説明しようとしましたが、明確でない場合はコメントで明確にしようとします!

ありがとう！

4

1 に答える 1

0

clearQueueアニメーション化されているオブジェクトで メソッドとメソッドを呼び出す必要があると仮定したのは正しかったように思われるので、匿名オブジェクトの代わりにアニメーション化できるようにプロパティstopを拡張しました。this.elementi

これは、プラグイン内の任意のメソッドからアクセスできる、オブジェクトのアニメーションを一時停止するメソッドをclearQueue呼び出すことができることを意味します。stopthis.element

Plugin.prototype = {
    init: function () {
        // Place initialization logic here
        // You already have access to the DOM element and
        // the options via the instance, e.g. this.element
        // and this.options
        // you can add more functions like the one below and
        // call them like so: this.yourOtherFunction(this.element, this.options).
        console.log('init');

        $.extend(this.element, { i: 0 });

        $(this.element).animate({ i: 1000 }, {
            duration: 1000
        ,   step:     function () { console.log(this.i); }
        });
    },
    stop: function () { //yourOtherFunction: function () {
        // some logic
        console.log('stop');
        console.log($(this.element));

        $(this.element).clearQueue();
        $(this.element).stop();
    }
};

stop()これにより、jQuery のネイティブメソッドが正常に機能するため、アニメーションを停止するために独自のパブリック メソッドを使用する必要がなくなりました。また、アニメーションを一時停止/再開したい場合は、既に利用可能な多数の一時停止/再開プラグインを使用できるようになりました。ホイールを書き直す必要はありません！

于 2013-03-05T13:14:43.467 に答える