Décaler des SetInterval

Version imprimable

09/02/2010, 11h22
Too91

Décaler des SetInterval
Bonjour à vous !

Voila, j'ai un petit problème et j'arrive pas à trouver ma solution avec mon ami le moteur de recherche ni avec ma ptite caboche pas très remplie ^^

Je désire faire un effet avec jquery. Un div apparait pendant que le deuxième disparait , puis inversement ... ( au final il y aura 4 div ).

Donc ca j'ai réussit ^^. Le problème se pose dans l'automatisation !

Actuellement, les deux div s'animent comme il faut, mais en même temps ...
Est t'il possible de faire un setTimeout sur un setInterval pour qu'ils soient décalés ???

Si oui j'ai pas du faire comme il fallait ^^

J'ai donc essayé ca ( texte1 et 2 sont mes fonctions avec hide & show ) ( les temps sont volontairement très bas c'est pour mes tests ^^ )
(sans le settimeout ca marche tres bien mais les effets sont synchro ...)
Code:

1 2 setInterval(texte1,2000); setTimeout(setInterval(texte2,2000),1000);
Merci d 'avance si quelqu'un peut me guider ^^
09/02/2010, 11h32
vermine

Trop vite!

Bonjour,

Est-ce que 100 milisecondes sont visibles à l'oeil nu ?
09/02/2010, 11h37
Too91

Oups erreur de ma part ^^
J'ai fait un copier coller mais javais oublier la fin du code et je recopier en live ^^
c'est 1000 bien évidement désolé ^^

Code:

1
2
	var anim1=setInterval(texte1,2000);
	setTimeout(var anim2=setInterval(texte2,2000),1000);

voire :

Code:

1
2
var anim1=setInterval(new texte1,2000);
	setTimeout(var anim2=setInterval(new texte2,2000),1000);

09/02/2010, 12h43
Bovino

Vu que tu utilises jQuery, pourquoi ne pas te servir de delay ?
09/02/2010, 15h16
Too91

@SpaceFrog
Tout comme mon code, seul le premier est pris en compte. Il bloque sur la ligne ou on cumule setInterval et setTimeout

@Bovino
Et bien tout simplement .... parce que je ne la connais pas ^^.
Je suis pas très à l'aise en javascript et je connait mal jquery (je suis en stage web (j'aurais préféré du java ou autre mais bon :( ) et le patron veut des effets zouli sur son site oueb ^^ )

Je regarde delay et je repasse :p

Code:

1
2
3
4
var anim1=setInterval(new texte1,2000);
	setTimeout(function(){
            var anim2=setInterval(function(){new texte2()},2000)}
            ,1000);

09/02/2010, 17h05
Too91

remoi ^^

Déjà petit problème avec la fonction delay.
j'ai rajouté dans ma ligne pour tester (de la même façon que indiqué dans la doc Jquery )

Code:

$("#texte-accueil-psi2").hide("slow").delay(1000).show("slow");

Le hide marche, le show non :(

@SpaceFrog
j'ai essayé ton code, mais c'est toujours le même soucis :(
le premier effet est immédiat (meme pas d'attente de 2000), puis à 4000 le deuxième effet se lance.

Par contre plus aucune "répétition" ce qui m'étonne d'ailleurs.

désolé de vous bouffer votre temps avec ca :mrgreen:

édit: j'ai oublié, peut être que c'est un problème qui vient de mon CMS ( Drupal ) ca m'étonnerais, mais c'est toujours mieux de demander ^^

Le passage de la theorie à la pratique à l'air de fonctionner ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<script type="text/javascript">
var anim1, anim2
var pos = 0
function move1(){
document.getElementById('foo1').style.left=pos+"px"
pos=pos+10;
}
function move2(){
document.getElementById('foo2').style.left=pos+"px"
}
 
function bar(){
anim1=setInterval(function(){new move1()},2000);
setTimeout(function(){
            anim2=setInterval(function(){new move2()},2000)},1000);
            }
</script>
<style type="text/css">
div {position:absolute;
     left:0;
     height:100px;
     width:100px;
     }
#foo1 { top: 10px;
        background-color:red;}     
#foo2 { top: 210px;
        background-color:green;}        
</style>
 
 
</head>

09/02/2010, 17h47
Too91
AHHHH c'est bon ca marche ^^

En fait, entre ton dernier code et celui d'avant il y a une petite différence que je n'avait point vu et que tu m'as mis en avant :p

Dans le petit bout de code il y avait pas
Code:

1 2 3 4 var anim1=setInterval(function(){new texte1()},4000); setTimeout(function(){ var anim2=setInterval(function(){new texte2()},4000)} ,2000);
la ca marche niquel merci beaucoup ^^
Je vais quand même creuser le delay, ca peut toujours être utile :P

En tout cas merci beaucoup de la rapidité et de l'efficacité :mrgreen:
09/02/2010, 18h08
SpaceFrog

Désolé le premier code était théorique ...
Le second je l'ai testé ^^