Faire apparaitre et disparaitre un texte

**Aeltith** · 17/03/2012, 12h17

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.

**Sam31000** · 17/03/2012, 23h40

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 :

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

**Aeltith** · 18/03/2012, 08h16

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

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

**Sam31000** · 18/03/2012, 08h22

Exactement

C'est du millième de seconde

**Aeltith** · 18/03/2012, 10h26

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 ?

**Sam31000** · 18/03/2012, 10h35

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

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

Faire apparaitre et disparaitre un texte

JavaScript

Vue hybride

Discussions similaires

Partager

Partager