水平滚动弹出式窗口

Question

我的目标是在预定义的时间间隔内滚动并显示一次弹出窗口，但我在for次迭代时遇到了一些麻烦。它不起作用，弹出窗口从第一个到最后一个重叠。

http://jsfiddle.net/3Y7g3/14/

$(function(){
$(window).scroll(function(){

       var popWidth = "44%";
       var popHeight = "30%";




function pop(popID){ $('#' + popID)
       .fadeIn().css({ 'width': String( popWidth ), 'height': String( popHeight ) })
       .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>');
};



function block(box, top, left, color){

$("#container").append('<div id="'+box+'"></div>');
$('#' +box).css("background-color", color).animate({top: top ,left: left });
};

var popup=['#popup1','#popup2','#popup3','#popup4','#popup5','#popup6','#popup7','#popup8'];

var range = $(this).scrollLeft();

    if( range > 500 && range < 600){

           pop('popup1');

           for (var i=0; i<popup.lenght; i++ ){

               if (popup[i]!='#popup1'){

               $(popup[i]).fadeOut(function() {$(popup[i]).hide();});

               };   
           };


           block('box1','84%','10%','#f04');

    }

    if(range > 1500 && range < 1600){

           pop('popup2');

           for (var i=0; i<popup.lenght; i++ ){

               if (popup[i]!='#popup2'){

                    $(popup[i]).fadeOut(function() {$(popup[i]).hide();});

               };  
            };

           block('box2','84%','17%','yellow');
     };

     if(range > 2500 && range < 2600){

           pop('popup3');

           //$('#popup1').fadeOut(function() {$('#popup1').hide(); });

           block('box3','84%','24%','blue');
   };