Fonction jQuery fadeIn() : change la transparence d'un élément. Comment rendre un élément Web transparent avec la définition et l'application jQuery
Dans ce didacticiel, nous allons examiner un exemple de modification de la transparence de JQuery . Des sujets similaires ont déjà été abordés dans la leçon, eh bien, là, le principe du script était basé sur un simple CSS Et html, dans cette leçon, nous aborderons également jQuery en plus de tout, il y a eu un simple changement de l'image au survol, la transparence est immédiatement effectuée ( opacité).
Je pense que vous avez déjà regardé deux démos et compris la différence dans le fonctionnement des scripts. Voyons maintenant le code de ce tutoriel.
Premier pas. HTML.
Et nous avons donc un fichier index.php.
Dans celui-ci, nous incluons d'abord la bibliothèque jquery.js. Téléchargez-le pour vous-même et connectez-vous entre les balises diriger.
Ensuite, nous analyserons jQuery code qui va interagir avec la classe image. Premièrement, nous écrivons une fonction qui a une classe image et définir la transparence 50% en position d'origine. C'est-à-dire qu'une image sans la survoler a la moitié de sa transparence. Ensuite, lorsqu'une action de survol est effectuée sur l'image, une fonction est appelée qui bascule la position de la classe imageà la position dégagée. Une fois le pointage vers l'image terminé, la fonction passe à la position initiale initiale. Attribut de transparence de l'image opacité. Vous pouvez l'étudier en détail dans la documentation de CSS.
$(function() ( // définit l'opacité de l'image à 50 % $(".img").css("opacity","0.5"); // passez la souris sur l'image $(".img").hover(function () ( // après quoi la transparence disparaît $(this).stop().animate(( opacity: 1.0 ), "slow"); ), // après avoir retiré la souris survolez l'image function () ( // la transparence revient à sa position d'origine de 50 % $(this).s top().animate(( opacity: 0.5 ), "slow"); )); ));
Deuxième étape. Fichier de style CSS.
Nous enregistrons la balise div et lui donner une classe images nous y spécifierons quelques styles CSS pour l'image (si vous le souhaitez, c'est juste mieux de voir comment fonctionne ce script). Maintenant, écrivez la balise image nous y spécifions le chemin vers l'image et définissons la classe image, qui interagit avec jQuery code ci-dessus.
Peu de modèles CSS pour une meilleure visibilité.
Images ( bordure : 1px solide #363636 ; largeur : 300px ; couleur d'arrière-plan : #2d2d2d ; rembourrage : 8px ; )
Le script est unique en son genre, ce qui le rend plus pertinent dans l'application des changements de transparence du survol de l'image. je vous conseille de jouer avec jQuery code, où il y a trois fonctions : initial, hover et unhover. Vous pouvez faire preuve de variété. Supposons, dans la position initiale, spécifiez opacité 0.5, En vol stationnaire opacité 1.0, et de la suppression du guidage opacité 0.2. Il se révélera une sorte d'action très intéressante avec l'image!
L'animation sur les pages Web modernes a longtemps été tenue pour acquise. Dissolution d'éléments, messages volants, galeries d'images coulissantes améliorent l'expérience utilisateur et augmentent les performances du site. Dans la populaire bibliothèque javascript jQuery, fadeIn() est l'une des fonctions d'animation de base. Il contrôle la transparence des blocs.
effets de fondu
La méthode fadeIn() garantit que la transparence de l'élément qui lui est transmis passe à 100 %. Dans la bibliothèque jQuery, il est associé à la fonction fadeOut(), qui peut être utilisée pour mettre à zéro la transparence et ainsi "dissoudre" l'élément.
Vous serez intéressé :
Un effet similaire peut être obtenu avec la méthode fadeTo(), qui a une plage d'influence encore plus large. FadeTo() peut définir n'importe quelle valeur de transparence entre 0 et 1.
Syntaxe de la méthode
La méthode fadeIn() de jQuery est appelée dans le contexte de l'élément dont la transparence doit être modifiée. Cela peut prendre de zéro à trois paramètres :
élément.fadeIn(); element.fadeIn(durée); element.fadeIn(durée, rappel); element.fadeIn(durée, accélération, rappel); élément.fadeIn(config);
L'argument durée spécifie la durée de l'animation. Il peut s'agir d'un nombre représentant le nombre de millisecondes ou de l'un des mots clés suivants :
- "rapide" (200 ms) ;
- "lent" (600 ms) ;
Si la durée n'est pas définie, elle sera par défaut de 400 millisecondes.
Le paramètre de rappel spécifie une fonction qui sera appelée immédiatement après la fin de l'animation. La fonction de rappel n'accepte aucun paramètre. La variable this à l'intérieur fait référence au nœud DOM en cours de modification.
L'argument d'accélération contrôle la fonction de synchronisation de l'animation, c'est-à-dire sa vitesse dans le temps. Avec lui, vous pouvez accélérer le début et ralentir la fin de l'animation, ou la rendre uniforme tout au long. La valeur de l'argument est une chaîne contenant le mot clé, la valeur par défaut est la fonction "swing".
Dans l'exemple suivant, jQuery fadeIn() augmentera uniformément la transparence d'un élément avec la classe .block pendant une seconde, après quoi il imprimera un message à la console :
$(".block").fadeIn(1000, linear, function() ( console.log("Animation complete"); ));
Si les paramètres répertoriés ne suffisent pas, vous pouvez transmettre l'objet de configuration à la méthode, qui peut contenir jusqu'à 11 paramètres différents.
Rappels
Le paramètre de rappel passé à la méthode jQuery fadeIn() est une option très utile car le changement de propriété est asynchrone sans bloquer le flux de code global.
const callback = function() ( console.log("Animation terminée"); ); $(".element").fadeIn(1000); rappeler();
Dans cet exemple, la fonction s'exécutera immédiatement après le démarrage de l'animation, sans attendre que l'élément apparaisse complètement.
Pour que tout fonctionne comme prévu, vous devez utiliser l'argument callback pour attraper la fin de l'animation :
const callback = function() ( console.log("Animation terminée"); ); $(".element").fadeIn(1000, rappel);
Désormais, le message à la console ne s'affichera que lorsque l'élément deviendra entièrement visible.
Transparence totale et masquage de l'élément
Comme vous le savez, la valeur zéro de la propriété opacity ne supprime pas l'élément de la page, mais le rend seulement invisible. Ce comportement n'est pas adapté si nous voulons masquer un bloc.
C'est pourquoi les méthodes de fondu de jQuery fadeIn(), fadeTo() et fadeOut() fonctionnent avec la transparence en combinaison avec la propriété display. Un élément entièrement transparent est masqué à l'aide de la règle display: none, et avant qu'il n'apparaisse, cette règle est annulée.
Dernière mise à jour : 1.11.2015
Les effets de transparence nous permettent de modifier en douceur la transparence d'un élément, de le masquer ou de l'afficher. Les effets de transparence sont implémentés à l'aide des méthodes fadeOut() , fadeIn() , fadeTo() et fadeToggle() .
Les méthodes fadeOut() , fadeIn() et fadeToggle() ont des usages similaires :
fadeOut/fadeIn/fadeToggle() : méthode sans paramètre
fadeOut/fadeIn/fadeToggle( [, easing][, complete]) . Le paramètre de durée spécifie la durée du changement de transparence de l'élément. Sa valeur par défaut est de 400 millisecondes.
Le paramètre d'accélération, qui prend le nom de la fonction d'accélération de l'animation sous forme de chaîne. Sa valeur par défaut est "swing". Vous pouvez également utiliser les valeurs "slow" et "fast", qui correspondent à la durée de l'effet en 600 et 200 millisecondes.
Le paramètre complete représente la fonction de rappel que la méthode appellera à la fin de l'animation.
La méthode fadeTo, contrairement aux autres méthodes, accepte également un paramètre d'opacité - elle prend une valeur à laquelle la transparence de l'élément doit être changée : fadeTo(duration, opacity [, easing][, complete]) . La valeur d'opacité est une valeur comprise entre 0 (entièrement transparent) et 1 (entièrement visible).
Disons que nous avons une image sur la page et deux boutons qui vont changer la transparence de cette image :
Afficher Masquer $(function() ( $("#ars").fadeTo(2000,0.6); $("#fadeIn").click(function())( $("#ars").fadeIn("slow", function())(alert("Displayed");)); )); $("#fadeOut").click(function())( $("#ars").fadeOut(2000, function())(alert("Hidden");)); )); ));
Veuillez noter que la méthode fadeIn augmente la transparence à la valeur qu'elle avait avant d'utiliser la méthode fadeOut, et pas nécessairement à 1. Autrement dit, dans ce cas, puisque la méthode fadeTo a été appliquée au début et que la transparence a été modifiée à 0,6, la méthode fadeIn augmentera également la transparence à 0,6.
Dans cette leçon, je veux présenter "à votre jugement" l'effet de transparence des images et du texte. L'effet, me semble-t-il, n'est pas mauvais et digne de considération. Il sert, bien sûr, comme beaucoup d'autres effets, à attirer un peu plus l'attention des visiteurs de votre site sur telle ou telle partie du texte ou sur n'importe quelle image.
Pour implémenter cet effet sur votre site, vous avez besoin :
2. Décompressez l'archive dans le dossier actuel de votre ordinateur. Dans le dossier transparence vous verrez :
- le dossier images avec l'image ;
- dossier js avec jQuery ;
- fichier demo1.html ;
- fichier demo2.html.
3. Ouvrez les fichiers demo1.html et demo2.html dans le navigateur que vous utilisez et vérifiez le script.
4. Téléchargez le contenu des dossiers images et js dans les dossiers du même nom sur votre site. Ces dossiers sont situés dans le dossier racine du site. Si vous n'en avez pas, vous devez les créer.
Transparence des images avec jQuery| Exemple de démonstration : |
extrait de code de connexion jQuery
()
et le script du fichier demo1.html, qui est présenté dans le tableau ci-dessous, est inséré dans head . Vous pouvez également insérer la structure entière ci-dessous dans le corps, car les scripts peuvent être placés dans différentes versions. Par exemple, vous avez un site PHP et vous ne voulez pas vraiment encombrer le fichier HEADER avec des scripts ponctuels.
Si vous possédez déjà la bibliothèque jQuery de la dernière version ou version ultérieure (version 3.1.1 au jour de la publication de l'article) ou que vous utilisez une connexion à distance de la dernière version depuis le site jQuery ou l'API Google, bien sûr, vous ne devez pas l'inclure à nouveau.
$(document).ready(fonction())( $(".limp").each(fonction())( $(this).animate((opacity:"0.3"),1); $(this).mouseover(function())( $(this).stop().animate((opacity:"1.0"),600); )); $(this).mouseout(function())( $(this.stop().animate((opacity:"0.3"),300); )); )); ) );
Le chemin d'accès au fichier de bibliothèque jQuery ;
Dans cette ligne, limp est le nom de la classe pour créer la transparence ;
Cette ligne définit la transparence initiale de l'élément ;
Cette ligne définit la transparence de l'élément lors du survol ;
Cette ligne définit la transparence lorsque le curseur quitte l'élément.
Et collez le code de l'image dans le corps à l'endroit que vous avez défini :
Ici, écrivez le chemin vers l'image, les retraits, la taille et le nom. Tous!
| Exemple de démonstration : Mon site est un site personnel qui vous donne un emplacement central pour gérer et stocker vos documents, contenus, liens et contacts. Mon site sert de point de contact aux autres utilisateurs de votre organisation pour trouver des informations sur vous, vos compétences et vos intérêts. Les fournisseurs de contenu peuvent utiliser Mon site comme méthode de personnalisation des informations qu'ils présentent aux utilisateurs. |
Ici, toutes les actions sont similaires à la première option. Seulement, à la place du code image, insérez le code avec le texte (dans le tableau ci-dessous) - au bon endroit dans la section body :
Mon site est un site personnel.
Écrivez votre texte ici.
Merci pour votre attention. Commentez l'article. Tous mes vœux. À bientôt! Cordialement, L.M.
Modifie le niveau de transparence des éléments sélectionnés sur la page. Vous permet de modifier la transparence en douceur. La méthode a deux utilisations :
durée - la durée du changement de transparence. Peut être donné en millisecondes ou la valeur de chaîne "fast" ou "slow" (200 et 600 millisecondes).
opacity - la valeur de la transparence requise. Doit être spécifié sous la forme d'un nombre compris entre 0 et 1 (0 - transparence totale, 1 - pas de transparence).
callback est la fonction spécifiée comme gestionnaire d'achèvement de changement de transparence. Aucun paramètre ne lui est passé, cependant, à l'intérieur de la fonction, la variable this contiendra l'objet DOM de l'élément dont la transparence est modifiée. S'il existe plusieurs éléments de ce type, le gestionnaire sera appelé séparément pour chaque élément.
durée - voir description ci-dessus. Par défaut, le paramètre est 400
opacité - voir ci-dessus.
assouplissement - la dynamique du changement de transparence (si elle ralentira vers la fin de la course ou, au contraire, s'accélérera). (Voir description)
rappel - voir ci-dessus.
- changer la transparence
- définir la transparence d'un élément
- définir le niveau de transparence d'un élément
- transparence des éléments
- .fondu au()
- fondu au()