jQuery的定时器两个周期后搞乱

Question

我有一个jQuery计时器去，似乎搞砸了2个周期后：treethink.treethink.net/backup

眼下，对不同的定时器就会缩回新闻股票，并变更为DIV正显示出再再次弹出。经过几个周期后，您可以在上面的链接中看到，有些会停留更长时间，然后重叠并且变得混乱。我不知道为什么会这样......

这里是我的代码：

/* Retracting Ticker */ 

    /* Initially hide all news items */ 

    $('#ticker1').hide(); 
    $('#ticker2').hide(); 
    $('#ticker3').hide(); 

    $("#ticker1").oneTime(1000,function(i) { /* Show 1 once on first pull out */ 

     $('#ticker1').show(); 

    }); 

    $("#ticker1").everyTime(64500,function(i) { /* Hide 3 and show 1 everytime timer gets to certain point */ 

     $('#ticker1').show(); 

    }); 

    $("#ticker1").oneTime(21500,function(i) { /* Hide 1 and show 2 once after first pull out */ 

     $('#ticker1').hide(); 
     $('#ticker2').show(); 

    }); 

    $("#ticker1").everyTime(86000,function(i) { /* Hide 1 and show 2 everytime timer gets to certain point */ 

     $('#ticker1').hide(); 
     $('#ticker2').show(); 

    }); 


    $("#ticker2").oneTime(43000,function(i) { /* Hide 2 and show 3 once after second pull out */ 

     $('#ticker2').hide(); 
     $('#ticker3').show(); 

    }); 

    $("#ticker2").everyTime(107500,function(i) { /* Hide 2 and show 3 everytime timer gets to certain point */ 

     $('#ticker2').hide(); 
     $('#ticker3').show(); 

    }); 

    $("#ticker3").oneTime(64000,function(i) { /* Hide 2 and show 3 once after second pull out */ 

     $('#ticker3').hide(); 

    }); 

    $("#ticker3").everyTime(129000,function(i) { /* Hide 2 and show 3 everytime timer gets to certain point */ 

     $('#ticker3').hide(); 

    }); 

    $("#ticker").oneTime(2000,function(i) { /* Do the first pull out once */ 

     $("#ticker").animate({right: "0"}, {duration: 800 }); 
    }); 

    $("#ticker").oneTime(20000,function(i) { /* Do the first retract once */ 

     $("#ticker").animate({right: "-450"}, {duration: 800}); 

    }); 

    $("#ticker").everyTime(21500,function(i) { /* Everytime timer gets to certain point */ 

     $("#ticker").animate({right: "0"}, {duration: 800}); /* Pull out right away */ 

     $("#ticker").oneTime(20000,function(i) { /* Retract once */ 

      $("#ticker").animate({right: "-450"}, {duration: 800}); 

     }); 

    }); 

感谢，

韦德

Answer 1

让我们忽略所有的oneTime小号，因为他们不要把你搞砸了。

$("#ticker1").everyTime(64500,function(i) { 
    $('#ticker1').show(); 
}); 

$("#ticker1").everyTime(86000,function(i) { 
    $('#ticker1').hide(); 
    $('#ticker2').show(); 
}); 

$("#ticker2").everyTime(107500,function(i) { 
    $('#ticker2').hide(); 
    $('#ticker3').show(); 
}); 

$("#ticker3").everyTime(129000,function(i) { 
    $('#ticker3').hide(); 
}); 

$("#ticker").everyTime(21500,function(i) { 
    $("#ticker").animate({right: "0"}, {duration: 800}); 
    $("#ticker").oneTime(20000,function(i) { 
     $("#ticker").animate({right: "-450"}, {duration: 800}); 
    }); 
}); 

您有4个对象：ticker，容器和3条消息。

容器的行为是这样的（大概，不包括第一次拉出）：每21.5秒，隐藏1.5秒，然后滑回去。好吧，这不是问题的根源，3个消息定时器是问题所在。

这是间隔的消息的行为：

ticker show (s) hide (s) 
1   64.5  86 
2   86   107.5 
3   107.5  129 

编辑我有我的号码错误的，第一股票的间隔时间，但我仍然认为这个想法是一样的。最终，时代重叠。