2

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

这里不是准确的 jsFiddle，这里是有针对性的示例。

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

资源。

4

1 回答 1

3

count每次被调用时都会覆盖$.fn.goDown，因此所有计时器最终都使用相同的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);
};

小提琴

这样，每个间隔counter都会有一个对应的count变量，只能在创建间隔的执行上下文中访问。_this与您确定插件范围内部的方式完全相同。

于 2013-02-22T19:48:14.893 回答