Veja a listagem a seguir:
<html>
<head>
<style>
P.pg1 {position:absolute; left: 0; top: 100; border: solid 1 red; background-color: salmon; padding: 6px; width: 100px;}
P.pg2 {position:absolute; left: 900; top: 600; border: solid 1 red; background-color: yellow; padding: 6px; width: 100px;}
</style>
<script type="text/javascript" src="jquery-1.6.4.js"></script>
<script type="text/javascript">
var tempo1 = 100;
var tempo2 = 600;
var th1, th2;
function movePg1(){
tempo1--;
if( tempo1 > 0 ){
$("#p01").css('top',tempo1);
th1 = setTimeout("movePg1()",300);
}
}
function movePg2(){
tempo2--;
if( tempo2 > 0 ){
$("#p02").css('top',tempo2);
th2 = setTimeout("movePg2()",300);
}
}
$(document).ready(function(){
th1 = setTimeout("movePg1()",300);
th2 = setTimeout("movePg2()",300);
});
</script>
</head>
<body>
<p id="p01" class="pg1">Eu parágrafo 1.</p>
<p id="p02" class="pg2">Eu parágrafo 2.</p>
</body>
</html>
É muito importante ter UMA FUNÇÃO PARA CADA TIMEOUT, para não estourar a pilha de armazenamento de retornos. Já fizemos tentativas para fazer um gerenciador único de timeouts, e a pilha estourou.
Os settimeouts são tratados em separado para cada objeto.
O efeito produzido é o seguinte:
Cada DIV segue seu controlador de timeout independente do outro.
