[Résolu] Apparition de mots en fade-in/out

Bonjour

Etant débutante et tâtant la programmation depuis peu j'ai un peu (beaucoup) de mal...Je viens donc vers vous pour solliciter de l'aide :

Je cherche à faire apparaître des mots en fade in fade out par JS...
j'aimerai que lorsqu'un apparaît il disparaît au bout de quelques secondes pour en faire apparaitre un autre et ainsi de suite (et le tout sur le même emplacement), j'ai une liste très précise de mot et je veux qu'en arrivant au dernier l'animation reprenne au début.

J'ai cru trouvé un code sur internet qui pouvait éventuellement m'aider, mais rien ne s'affiche et je ne suis pas sûre de comprendre ce qui cloche :

 var mots = ['Mot1', 'Mot2', 'Mot3', 'Mot4'];
 
        $.each(mots, function(i, val) {
            setTimeout(function() {
                $('#divDispMots').fadeOut("slow", function() {
                    $(this).text(val).fadeIn("slow");
                    $('#fade').cycle();
                });
            }, i * 3000);

Pourriez vous m'aider ?
Merci d'avance
Modifié par Sabsab (15 Apr 2017 - 14:10)

Bonjour bonjour,

Alors dans le code il y a quelques soucis (manque la fermeture du each, la fonction cycle() doit etre d'un module supplémentaire) qui l’empêche de fonctionner tel quel.
Voila l'exemple qui tourne : https://jsfiddle.net/z14fdLvo/
Il reste à le boucler à l'infini.

Mais du coup c'est faisable en pur CSS grâce aux animations. Il suffit de faire une animation qui fait apparaître et disparaître un mot et de décaler les animations. Il faut juste faire un petit calcul selon le nombre total de mot afin que le temps ou le mot soit caché tout els autres mot aient le temps de passer. Exemple pour 4 mots : https://jsfiddle.net/7aah9fxa/
Modifié par _laurent (13 Apr 2017 - 14:35)

Bonjour,

Tout d'abord merci pour votre réponse qui m'est d'une grande aide.
je préfère le faire en JS car ma liste contient près de 200/300 mots, plus efficace en JS du coup..

J'ai repris votre code, cependant dès que je l'ouvre dans mon fichier les mots sont introuvables, lorsque j'ouvre la console j'ai le message d'erreur suivant : "Uncaught ReferenceError: $ is not defined at window.onload (canvas.js:27)"

qui me renvoie à cette ligne de code js :

$.each(mots, function(i, val) {

je ne comprends pas pourquoi cela fonctionne dans votre exemple et pas sur ma page
Modifié par Sabsab (13 Apr 2017 - 14:56)

Hahaha parceque c'est du JQuery, pas du pur Javascript
Il faut importer la librairie, tout est expliqué ici : https://www.w3schools.com/jquery/jquery_get_started.asp
Soit tu l'a téléchargé sur https://jquery.com/ et tu utilises :

<script src="jquery-3.2.1.min.js"></script>

comme un script classique ou un CSS.
Soit tu vas le chercher à distance et tu as juste besoin de mettre

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

dans le header.


200/300 mots affiché 1 par 1 ???? ca va rendre fou !
Modifié par _laurent (13 Apr 2017 - 15:12)

Ah merci beaucoup, je m'en vais lire ça !

et c'est le but hihi

Bonne fin de journée à vous

Et du coup pour boucler le JS à l'infini il faudra utiliser la fonction setInterval() https://www.w3schools.com/jsref/met_win_setinterval.asp sur le each : https://jsfiddle.net/z14fdLvo/1/
Modifié par _laurent (13 Apr 2017 - 15:52)

Problème résolu
Modifié par Sabsab (15 Apr 2017 - 20:13)