$ .fn setInverval具有不同couting值的多个元素

Question

我可以设法对具有不同速度的多个元素执行无限动画，但我使用了几个setInterval函数。我的目标是用一个功能做到这一点，当我用$.fn来尝试这个时，它们都以相同的速度动画。我在哪里做错了？

Here is not accurate jsFiddle和here is targeted sample。

的jQuery：

var eleHeight = $('.drop_leds').height(); 
var windowH = $(window).height(); 
var count = 0; 
var counter; 
var limit = windowH + eleHeight; 

$.fn.goDown = function(x) { 
    var _this = this; 
    return counter = window.setInterval(function() { 
     if(count >= 0 && count < limit) { 
      count += x; 
      _this.css({'top':count +'px'}); 
     } 
     else if(count >= limit) { 
      count=0; _this.css({'top':'-'+ eleHeight +'px'}); 
     } 

    },1); 
}; 

$('#l_0,#l_6').goDown(1); 
$('#l_1,#l_4').goDown(3); 
$('#l_2,#l_7').goDown(4); 
$('#l_3,#l_5').goDown(2); 

HTML/CSS：

<div id="l_0" class="drop_leds"></div> 
<div id="l_1" class="drop_leds"></div> 
<div id="l_2" class="drop_leds"></div> 
<div id="l_3" class="drop_leds"></div> 
<div id="l_4" class="drop_leds"></div> 
<div id="l_5" class="drop_leds"></div> 
<div id="l_6" class="drop_leds"></div> 
<div id="l_7" class="drop_leds"></div> 

.drop_leds {position:absolute; width:10px; height:60px; background:black; top:0;} 
#l_0 { left:40px; }#l_1 { left:70px; }#l_2 { left:110px; }#l_3 { left:140px; } 
#l_4 { left:180px; }#l_5 { left:210px; }#l_6 { left:220px; }#l_7 { left:240px; } 

Source.

Answer 1

你每次$.fn.goDown覆盖count被调用，所以所有的计时器最终使用相同的count值。它移动到你的插件的内部范围内来解决该问题：

$.fn.goDown = function(x) { 
    var count = 0; 
    var counter; 
    var _this = this; 
    return counter = window.setInterval(function() { 
     if(count >= 0 && count < limit) { 
      count += x; 
      _this.css({'top':count +'px'}); 
     } 
     else if(count >= limit) { 
      count=0; _this.css({'top':'-'+ eleHeight +'px'}); 
     } 

    },1); 
}; 

Fiddle

这样，每个区间counter都会有相应的count变量只有创建该区间的执行上下文内访问。正如你如何在插件范围内限定_this一样。