Rappels

• JQuery - principes de base

Un résumé de JQuery.

Si vous n'êtes pas du tout familiarisé avec JQuery, vous pouvez commencer par les tutoriaux JQuery classiques ou interactifs et plein de vidéos (prévoir environ 3h)

• JQuery - principes et fonctions utiles pour l'animation

Un résumé de ce que vous êtes censés connaître des techniques d'animation avec JQuery

Toutefois, si vous n'êtes pas encore familiarisés avec les animations en JQuery, vous pouvez commencer par les tutoriaux classiques sur les effets JQuery

Exercice 1: dévoilement progressif d'un texte à partir du plan

Fonctions jQuery utiles pour cet exercice : html/text/length et fadeIn/fadeOut, slideUp/slideDown, hide/show

1. A partir de ce document, ajouter le code jQuery qui permet d'afficher seulement les titres de niveau 1 (éléments de type h1).
2. Ecrire le code utile pour qu'un clic sur la page affiche le premier paragraphe et ainsi de suite jusqu'à ce que tous les paragraphes soient affichés. Le clic après que tous les paragraphes soient affichés a pour effet de cacher tous les paragraphes et de remettre dans l'état initial pour qu'il soit de nouveau possible d'ouvrir les paragraphes les uns après les autres par simple clic sur la page.
   NB: Essayer différentes formes d'animation pour tester différents styles: apparition simple, fondu, glissement.
3. Ajouter un texte en haut du document qui affiche soit "double cliquer ici pour tout développer" soit "double cliquer ici pour tout réduire" selon que le document affiche les titres seuls ou tout le texte. Faire en sort qu'un double clic sur ce texte permette de faire apparaitre/disparaitre le contenu des paragraphes.

Exercice 2: compte à rebours

Fonctions utiles pour cet exercice : setInterval/ clearInterval et fadeIn/fadeOut

1. Créer un document html comportant essentiellement un élément de type <p> dans une zone de type <div > avec un identifiant permettant de faire facilement de l'élémént <p> une variable JQuery utile à l'affichage du compte à rebours.
2. Ecrire le code javascript pour afficher l'état du compte à rebours sous la forme de la figure suivante:

3. Faire en sorte qu'après chaque seconde l'affichage se mette à jour
4. Faire une petite animation à chaque changement de minute en utilisant un effet de fondu
5. Ajouter un effet de présentation différent, par exemple un glissement, lorsque le temps écoulé est terminé.