我的jquery插件＆setInterval - 動畫只運行1幀

我需要動畫一個精靈懸停，這就是它！我嘗試了一些插件，但決定寫我自己的。那就是：我的jquery插件＆setInterval - 動畫只運行1幀

(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）&選項放入我的動畫函數中？要麼？

來源

2012-09-24 iiz

window.setInterval()需要function類型的參數，但是你提供的animate的返回值，這是undefined。

當你寫

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

你告訴JS引擎立即執行animate(opts, t)，然後在返回的值，在這種情況下是undefined叫setInterval，因爲你的功能不明確地返回任何東西。所以就像下面這樣發生：

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-24 13:04:21 Raffaele

你傳遞的結果您animate方法來setInterval - 即時猜測你想每次實際調用該函數。

只是包裝你的函數調用的匿名函數：

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

來源

2012-09-24 12:59:54 Jamiec

我的jquery插件＆setInterval - 動畫只運行1幀

回答

相關問題