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();
    }
});

然而，动画每次悬停只移动一帧。根据我的发现，这是因为我在 setInterval 中使用了函数调用而不是引用。如果我删除 ()，我可以创建 setInterval 循环，但是我的动画函数在没有变量的情况下失败。

如何使用 setInterval 将我的 $(this) & options 放入我的动画函数中？或者？

4

2 回答 2

1

您将方法的结果传递animate给setInterval-我猜您每次都想实际调用该函数。

只需将您的函数调用包装在一个匿名函数中：

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);

你告诉 JS 引擎animate(opts, t)立即执行，然后调用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 回答