texte défilant continu

Version imprimable

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

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

30/04/2010, 13h04
marcha

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)

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

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...

30/04/2010, 14h04
marcha
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:

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

merci.
Mais comment je reinitialise marginLeft ?

Code:

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

ou

Code:

$('#defile').animate({'marginLeft':'600px'}); ?
30/04/2010, 15h46
marcha

La première solution me semble correct