alterner du texte ?

Version imprimable

alterner du texte ?

bonjour,
comment faire alterner l'affichage de ce texte, il affiche le premier en suite en même temps il masque le premier tout en affichant le seconde , ensuite masquer le 2eme tout en affichant le troixieme, ensuite il repete la boucle,
j'ai fait ce code mais ça marche pas :cry:

Code:

1
2
3
4
5
6
7
8
 
<div id="div1">
                 <ul>
                     <li style="display:none;"><h1>1.</h1></li>
                     <li style="display:none;"><h1>2.</h1></li>
                     <li style="display:none;"><h1>3.</h1></li>
                 </ul>
             </div>

Code:

1
2
3
4
5
6
7
8
9
 
setInterval(function() {
                i = i % 3;
                $("#div1 ul li").eq(i).fadeIn(5000, function () {
                    $("#div1 ul li").eq(i-1).fadeOut(3000);
                });
 
                i++;
            }, 5000);

22/03/2012, 09h38
SpaceFrog

jquery possède les selecteurs :even et :odd

merci pour votre réponse,
j'ai réglé le problème avec ce code :

Code:

1
2
3
4
5
6
7
8
9
 
var i = 0;
            var element = selecteur +" li";
            var length = $(selecteur + ' > *').length;
            setInterval(function() {
                i = i % length;
                $(element).eq(i).fadeIn(500).delay(4000).fadeOut(500);
                i++;
            }, 5000);

je sais pas il est optimisé mais ça fonctionne :P

odd et even fonctionnent à merveille ! :roll:

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
<ul>
 	<li>pair</li>
	<li>impair</li>
 	<li>pair</li>
	<li>impair</li>
 	<li>pair</li>
	<li>impair</li>
 	<li>pair</li>
	<li>impair</li>
 	<li>pair</li>
	<li>impair</li>
 	<li>pair</li>
	<li>impair</li>
 	<li>pair</li>
	<li>impair</li>
</ul>	
 
<script type="text/javascript">
$(document).ready(function () {
 
  $('ul li:odd').css({'color':'blue'})
  $('ul li:even').css({'color':'red'}).hide()
 
   var launch=setInterval(function() {
   				 $('ul li:odd').fadeOut(500, function(){ $(this).next('li').fadeIn(500).delay(4000).fadeOut(500, function(){$(this).prev('li').fadeIn(500)})})   				 				
   },10000)
 
});
</script>
</body>
</html>