Tutoriel menu fading avec Jquery
Bonjours, dans ce tutoriel je vais vous montrer quelques effets simples que vous pouvez utiliser pour agrémenter votre site Web en utilisant jQuery. Très simple à utiliser et à mettre en œuvre.
Petit rappel qu’est ce que jquery?  jQuery est une bibliothèque JavaScript légère qui met l’accent sur l’interaction entre JavaScript et HTML.
Que puis-je faire avec ce code? En gros son un effet fade in fade out. L’effet estompe un élément à 30% à l’arrivée du site Web, puis lorsque vous survolez l’élément va apparaitre à 100%. L’effet peut être attribué soit une image, un texte, un lien ou même une div.
Le code JavaScript ressemble à ceci :
1 $(document).ready(function(){
2 $("VOTRE ELEMENT ").fadeTo("slow", 0.3);
3 $("VOTRE ELEMENT ").hover(function(){
4 $(this).fadeTo("slow", 1.0);
5 },function(){
6 $(this).fadeTo("slow", 0.3);
7 });
8 });
Je vais vous expliquez le code ci-dessus.
Ligne 1 signifie quelle va charger le JavaScript lorsque le document est en pleine charge, ce qui signifie le début  du code JavaScript jusqu’à la totalité du fichier HTML est chargée. Quand tout a chargé le script sera exécuté
Ligne 2 désigne l’élément estompé à 30%, 0.3 est égal à 30%, à une vitesse lente.Où il est écrit « VOTRE ELEMENT » se sera notre identifiant.
Ligne 3 signifie que si la souris passe sur l’élément à 1.0 à une vitesse lente le 1.0 est égal à 100% L’élément sera alors apparaitra à 100% jusqu’à ce que la souris soit déplacée hors de l’élément. Puis le dernier morceau de code signifie que lorsque la souris est déplacée hors de l’élément s’estompe à 30%, 0.3 à une vitesse lente.
Maintenant je vais vous montrer comment ajouter tout cela à votre site. Je vous ais mis à disposition un lien de téléchargement qui contient un exemple simple.
Extraire le contenu du fichier « example.zip» dans le dossier de votre choix, à l’intérieur du dossier exemple créer un nouveau dossier nommé « js» Dans ce dossier  va placez la bibliothèque  jquery fichier qui peut être trouvé ici. Ensuite, créez un fichier txt  vide et enregistrez l’intérieur du dossier « JS» et nommé le fonction.js. A l’intérieur du dossier JS il devrait y avoir 2 fichiers. « Jquery.js» et “fonction.js “ Ouvrez le fichier « fonction.js » dans Dreamweaver, puis copiez et collez le code effet jQuery ci-dessus, puis sur Enregistrer.
Si vous regardez dans le code HTML de l’exemple que vous verrez entre <head> et </head> quelques lignes de JavaScript.
1 <script type="text/javascript" src="js/jquery.js"></script>
2 <script type="text/javascript" src="js/custom.js"></script>
Assurez-vous que les noms de fichier des fichiers. JS correspondre aux vôtres.
Maintenant, pour que vous puissiez utiliser l’effet sur presque n’importe quoi à l’intérieur d’un document HTML, nous allons maintenant ajouter les effets aux images individuelles que nous avons dans notre exemple de fichier HTML, si vous regardez le code dans le fichier HTML en ce qui concerne les images que vous remarquerez qu’ils ont une classe de « class =» img_test « . La classe est définie dans le fichier CSS. La classe est une forme d’identité dans laquelle les images peuvent être identifiées. Si nous ouvrons « fonction.js» dans dreamweaver puis recherchez les mots « VOTRE ELEMENT» à l’intérieur du code, et que vous remplacer « VOTRE ELEMENT » par la classe qui est . img_test l’effet appliquera à toutes la balise avec une classe de » img_test « dans notre cas les images. Votre fichier. fonction.js devrait ressemblé a ça.
$(document).ready(function(){
$(".img_test").fadeTo("slow", 0.3);
$(".img_test").hover(function(){
$(this).fadeTo("slow", 1.0);
},function(){
$(this).fadeTo("slow", 0.3);
});
});
Enregistrez-le fichier fonction.js, puis affichez votre fichier HTML dans votre navigateur. Voir la démo.
Vous pouvez l’appliquer d’autres éléments dans un document HTML, par exemple à un texte comme dans la demonstration.
Le texte dans mon document HTML l’effet est appliquer entre les balises < p></p> et pas a la balise div.Si j’applique l’effet à la balise div l’effet sera appliquer a l’enssemble de la balise div , ce qui signifie que tout le contenu de la balise div aura même effet de fondu.
J’espere que ce petit tutoriel sur Jquery vous a plu.
N’hésitez pas à dire si un point n’est pas assez clair !
Laissez un commentaire