Discussion :

[Too91]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
	setInterval(texte1,2000);
	setTimeout(setInterval(texte2,2000),1000);

Merci d 'avance si quelqu'un peut me guider ^^

[vermine]

Bonjour,

Est-ce que 100 milisecondes sont visibles à l'oeil nu ?

[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é ^^

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

voire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bovino]

Vu que tu utilises jQuery, pourquoi ne pas te servir de delay ?

[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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

$("#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


é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 ^^

[SpaceFrog]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

En tout cas merci beaucoup de la rapidité et de l'efficacité

[SpaceFrog]

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