texte défilant continu

**trinic** · 30/04/2010, 12h45

bonjour à tous,
Je débute en Javascript et jQuery.

J'ai réadapter le code suivant pour réaliser un texte défilant.
Le code est à améliorer car j'aimerai que le texte s'affiche en continu.

Mais pour l'instant le problème n'est pas la !

Le script marchouille à moitié et je ne vois pas d'ou vient le problème.
Le script patauge dans la semoule puis affiche le texte de façcon saccadé.
Merci à ceux qui peuvent jeter un oeil

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Prompteur</title>
 
<style>
#cadre { width:600px; margin:0 auto; border:0; overflow:hidden;}
#prompt { position:relative; width:580px; height:20px; overflow:hidden; 
          color:inherit; background:#FFFFFF url(news.gif); border:1px inset white; }
#defile { position:absolute; margin-top:1px; background-color:transparent;left:0; }
</style>
<script language="javascript" src="jquery-1.4.2.min.js"/></script>
<script language="javascript">
function prompteur(taille){
	$('#defile').animate({'marginLeft': '600'}, 10);
	for(var i=0; i<taille+600; i++){
 
	$('#defile').animate({'marginLeft':'-=1px'}, 10);
	}
	prompteur(taille);
 
}
 
jQuery(document).ready(
function(){
	taille = $('#defile').width();
	//document.write(taille);
prompteur(taille);
 
}
);
 
</script>
 
</head>
 
<body>
<div id="cadre">
 
 
 
 <div id="prompt">
<p id="defile">
 
 
  Voila un tres joli texte defilantf   dsfdsq  ergsdgfd fdgsfd  gfdsgdfff sdg fsdg fdg dfgfd gfd lkjljk</p>
 
 </div>
 
 
 
</div>
</body>
</html>

**marcha** · 30/04/2010, 13h04

Salut,

Tu n'as pas besoin de boucle, tout est dans animate (géré avec un timer)

Sache qu'en javascript tu ne peux pas faire des animations dans des
boucles, car il faut rendre la main (quitter la fonction) pour que le navigateur
puisse appliquer les réglages demandés. Donc on travail avec un timer (qui
rappelle la fonction d'animation un peu plus tard) Mais tout ceci est géré
par JQuery.animate()

Dans ton cas, tu crées des centaines d'animations qui de surcroit utilisant
une durée trop courte (10ms).

Tu devrais arriver à un résultat correct avec un seul
appel à animate et une durée par exemple de 1000 (1 seconde)

**trinic** · 30/04/2010, 13h10

Merci pour ta réponse rapide.
Je ne savais pas pour la boucle.
du coup ca me donne ca

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
 
<script language="javascript">
function prompteur(taille){
	//$('#defile').animate({'marginLeft': '600'}, 1000);
 
	$('#defile').animate({'marginLeft':'-=1px'}, 1000);
	prompteur(taille);
 
}
 
jQuery(document).ready(
function(){
	taille = $('#defile').width();
	//document.write(taille);
prompteur(taille);
 
}
);
 
</script>

Mais du coup ca ne boucle plus du tout. ca ne defile qu'une fois...

**marcha** · 30/04/2010, 14h04

Salut,

animate lance un timer et rend la main, donc tu appelle à nouveau
prompteur avant même que l'animation aie vraiment commencé.

Il faut utiliser la callback appelée par JQuery à la fin de l'animation
pour relancer celle-ci

Code :

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

1
2
3
4
5
6
7
8
 
 
function prompteur(taille){
	$('#defile').animate({'marginLeft':'-=1px'}, 1000, function() {
          // réinitialiser marginLeft ici
	  prompteur(taille);
        });	
}

**trinic** · 30/04/2010, 15h03

merci.
Mais comment je reinitialise marginLeft ?

Code :

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

$('#defile').css({'margin-left': '600px'}); ?

ou

Code :

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

$('#defile').animate({'marginLeft':'600px'}); ?

**marcha** · 30/04/2010, 15h46

La première solution me semble correct

texte défilant continu

jQuery

Discussions similaires

Partager

Partager