0

ホバー時にスプライトをアニメーション化する必要があります。私はいくつかのプラグインを試しましたが、自分でプラグインを作成することにしました。ここにあります：

 (function($) {
    function animate(opts, t) {
        if (opts.bgpos === opts.width * opts.frames) {
            t.css('background-position-x', '0px');
        } else {
            opts.bgpos = opts.bgpos + opts.width;
            t.css('background-position-x', opts.bgpos + 'px');
        }
    }
    $.fn.spin = function(options) {
        var t = $(this);
        var opts = $.extend({}, $.fn.spin.defaults, options);
        var frames = t.data('frames');
        var bgpos = parseInt(t.css('background-position-x'),10);
        opts = $.extend({
            'frames': frames,
            'bgpos': bgpos
        }, opts);
        setInterval(animate(opts, t), 1000 / opts.fps);
    };
    $.fn.spin.defaults = {
        fps: 7,
        width: 236
    };
})(jQuery);

[スプライトアニメーションがスピンであるため、スピンと呼ばれます]

私はそれをこのように呼んでいます：

$('article.post').on({
    mouseenter: function() {
        var t = $(this);
        t.children('div.filmstrip').spin();
    }
});

ただし、アニメーションはホバーごとに1フレームしか移動しません。私が見つけたのは、setIntervalで参照ではなく関数呼び出しを使用しているためです。（）を削除すると、setIntervalループを作成できますが、アニメーション関数は変数なしで失敗します。

$（this）とオプションをsetIntervalを使用してアニメーション関数に取り込むにはどうすればよいですか？または？

4

2 に答える 2

1

メソッドの結果をに渡します-毎回実際にその関数を呼び出したいと思います。animatesetInterval

関数呼び出しを無名関数でラップするだけです。

setInterval(function(){ animate(opts, t) }, 1000 / opts.fps);
于 2012-09-24T12:59:54.983 に答える
0

window.setInterval()タイプのパラメータが必要functionですが、の戻り値を指定します。animateこれはundefinedです。

あなたが書くとき

setInterval(animate(opts, t), 1000 / opts.fps);

animate(opts, t)JSエンジンにすぐに実行するように指示し、次にsetInterval戻り値を呼び出します。この場合はundefined、関数が明示的に何も返さないためです。したがって、次のようになります。

var animated = animate(opts, t); //animated == undefined
setInterval(animated, 1000/opts.fps);

したがって、何もスケジュールしていません。関数リテラルを使用することをお勧めします

setInterval(function() {animate(opts, t);}, 1000 / opts.fps);

閉鎖するように

function() {
  animate(opts, t);
}

に渡されsetInterval、後で実行されるようにスケジュールされます。

于 2012-09-24T13:04:21.003 に答える