Jquery et effets graphiques

Jquery et effets graphiques

Gestion de CSS de base

Exercice 1 • Rependre la CSS des chapitres précédents • Modifier la hauteur de la div lorsque qu’on clique dessus en JQuery

Exercice 2 • Faites en sorte de récupérer la hauteur et de la modifier pour qu’elle augmente à chaque fois que vous cliquez

Exercice 3 • Faire un petit programme qui agrandis tout seul la grandeur du claque.

Exercice 4 • Faites un programme ou le rectangle augment tout seul lorsqu’on clique dessus

Les animations

Fonction animate() • simplement une propriété CSS • qui se déroulera pendant un intervalde temps, • Par exemple : $('p').animate({ width : '150px', }); !!! Ce sont des virgules, c’est une énumération !

Durée de l’animation • On peut indiquer la durée (donc la vitesse) de l’animation : $('p').animate({ width : '150px' }, 'fast'); // premier exemple avec la valeur fast (200ms) $('p').animate({ width : '150px' }, 1000); // second exemple avec 1000ms (= 1s)

Les différentes durées • Les différentes durée « standard » : • Slow • qui équivaut à une durée de 600 millisecondes ; • normal, • la valeur par défaut, qui est égale à 400 millisecondes ; • fast, • qui représente une durée de 200 millisecondes seulement.

Easing : l'évolution de l'animation • L'évolution de l'animation • Swing • la valeur par défaut, fait aller l'animation de plus en plus vite au cours du temps, et ralentit à la fin ; • linear, • qui force l'animation à se dérouler à la même vitesse durant toute l'opération

Easing $('p').animate({ width : '150px' }, 'linear'); // l'animation se déroulera de façon linéaire

complete : la fonction de retour • La fonction de retour, • plus communément appelée callback, • action qui se lancera une fois l'animation terminée. $('p').animate({ width : '150px' }, function(){ alert('Animation terminée !'); });

Ecriture $('p').animate({ width : '150px' }, 1000, 'linear', function(){ alert('Animation terminée !'); }); Code équivalent : $('p').animate({ width : '150px' }, { duration : 1000, easing : 'linear', complete : function(){ alert('Animation terminée !'); } });

Exercice 5 • Reprenez l’exercice 4 et modifiez la largeur et sa hauteur avec animate() en lui donnant un durée, un easing et une fonction de fin

Queue : enchainement Deux animations en même temps : $('p') .animate({ width : '150px' }, { duration : 1000, queue : false }) .animate({ fontSize : '35px' }, 1000);

Les états • Agir seulement sur la propriété qui les utilise. • show • affiche la propriété • hide • la cacher • Toggle • navette entre les deux : si la propriété est cachée, il l'affiche, et vice versa.

Les états $('p').animate({ width : 'show' // anime la largeur pour afficher le paragraphe }); $('p').animate({ width : 'hide' // anime la largeur pour cacher le paragraphe }); $('p').animate({ width : 'toggle' // anime la largeur pour cacher ou afficher le paragraphe });

Les états sous forme de fonctions $('p').hide('slow'); // cache le paragraphe en 600ms $('p').show('fast', function(){ alert('Paragraphe affiché !'); });

Les fonctions de base • slideDown() déroule l'élément pour l'afficher ; • slideUp() enroule l'élément pour le cacher ; • slideToggle() enroule ou déroule selon l'état courant de l'élément. • fadeIn() affiche l'élément progressivement ; • fadeOut() cache l'élément, en ajustant l'opacité également. • fadeToggle() affiche ou cache l'élément, grâce à l'opacité.

Gestion des attributs • Pour récupérer un attribut : • $('img').attr('src') • Var exemple = $('img').attr('src') • Pour donner un attribut • $('img').attr('src', 'nouveauChemin/photo.png');

Changer plusieurs attibuts • mauvaise méthode $('img').attr('src', 'nouveauChemin/photo.png'); $('img').attr('alt', 'Nouvelle photo'); $('img').attr('title', 'Nouvelle photo'); • bonne méthode $('img').attr({ src : 'nouveauChemin/photo.png', alt : 'Nouvelle photo', title : 'Nouvelle photo' });

Manipuler les attributs $('img').attr('alt', function(index, valeur){ return index + 'ème élément - ' + valeur; });

Jquery et effets graphiques