Faire apparaitre et disparaitre un texte

Version imprimable

17/03/2012, 12h17
Aeltith

Faire apparaitre et disparaitre un texte

Hello

Voilà... j'aimerai faire apparaitre et disparaitre dans un petit bloc style "news" du texte.

Sauf que je veux pas faire défilé du texte de gauche à droite ou autre...

Voilà ce à quoi je pense :

texte qui apparait pendant 5 secondes, le texte disparait et un autre apparait et reste 5 secondes, etc etc

Je n'ai pas d'idée du nombre de texte qui en fait seront des petites news avec un lien vers une autre page.

Si vous avez des pistes ou autre idées données les moi je regarderai et reviendrai si j'ai des questions. Si vous avez carrément un script qui fait déjà ça je suis preneur ^^

Merci, je reste dispo si ce que je cherche a faire est pas clair.

Salut,

Voila un petit script qui fait ce que tu cherches (enfin je pense, j'avoue avoir un peu de mal a comprendre ta demande)

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
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
        <script type="text/javascript">google.load("jquery", "1.7");</script>
        <script type="text/javascript">
            $(document).ready (function (){
                var text_cpt = 0;
                //A éventuellement remplir par appel AJAX...
                var tab_text = ["text 1 ","text 2","text 3","text 4"];
 
                text_function ();
 
                function text_function ()
                {
                    $("#container").html(tab_text[text_cpt]);
                        text_cpt = (text_cpt + 1) % tab_text.length;
                    setTimeout (text_function,5000);
                }
            });
        </script>
        <div id="container"></div>
    </body>
</html>

18/03/2012, 08h16
Aeltith

J'ai regardé et tester c'est exactement ça. Je vais regarder plus en détail le code. Question :

Citation:

setTimeout (text_function,5000);

C'est bien du millième de seconde le 5000 ?

EDIT : ok j'ai la réponse à ma question ^^

Je garde le sujet ouvert pour le moment je vais bosser sur ça ce week end. Si j'ai une question je reviens, si j'ai pas de question je reviens quand même pour fermer ^^
18/03/2012, 08h22
Sam31000

Exactement :) C'est du millième de seconde
18/03/2012, 10h26
Aeltith

Ah si j'ai une question, entre les changement de texte, est il possible de rajouter un effet de fading ?

En gros entre "texte 1" et "texte 2" d'avoir comme un effet ou le texte 1 s'efface peu a peu avant que le texte 2 apparaisse ?

Alors voila l'idée pour l'effet de fade.

:)

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
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
    </head>
    <body>
        <script type="text/javascript" src="http://www.google.com/jsapi?key=VOTRE_CLE"></script>
        <script type="text/javascript">google.load("jquery", "1.7");</script>
        <script type="text/javascript">
            $(document).ready (function (){
                var text_cpt = 0;
                //A éventuellement remplir par appel AJAX...
                var tab_text = ["text 1 ","text 2","text 3","text 4"];
 
                $("#container").html(tab_text[0]);
                setTimeout (text_function, 5000);
 
                function text_function ()
                {
                    $("#container").fadeOut (100,function (){
                        $("#container").html(tab_text[text_cpt])
                        $("#container").fadeIn ();
                        });
 
                        text_cpt = (text_cpt + 1) % tab_text.length;
                    setTimeout (text_function,5000);
                }
            });
        </script>
        <div id="container"></div>
    </body>
</html>