Question

我需要在悬停时为精灵制作动画，就是这样！我尝试了一些插件，但决定自己编写。这是：

 (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循环，但是我的animate函数在没有变量的情况下失败。

如何获得$（this）＆amp;使用setInterval进入我的animate函数的选项？或？

Answer 1

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

只需将函数调用包装在匿名函数中：

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

Answer 2

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，并计划稍后执行。

我的jquery插件＆amp; setInterval - 动画只运行1帧

2 个答案: