JqueryUI - Masquer
Ce chapitre abordera les hide()méthode, qui est l'une des méthodes utilisées pour gérer les effets visuels jQueryUI. effect () applique un effet d'animation pour masquer des éléments.
Syntaxe
le hide() méthode a la syntaxe suivante -
.hide( effect [, options ] [, duration ] [, complete ] )| N ° Sr. | Paramètre et description |
|---|---|
| 1 | effect Il s'agit d'une chaîne indiquant l'effet à utiliser pour la transition. |
| 2 | options Celui-ci est de type Object et indique les réglages et l' accélération spécifiques à l'effet . De plus, chaque effet a son propre ensemble d'options qui peuvent être spécifiées communes à plusieurs effets décrits dans le tableau Effets jQueryUI . |
| 3 | duration Il est de type Number ou String et indique le nombre de millisecondes de l'effet. Sa valeur par défaut est 400 . |
| 4 | complete Il s'agit d'une méthode de rappel appelée pour chaque élément lorsque l'effet est terminé pour cet élément. |
Effets jQueryUI
Le tableau suivant décrit les différents effets qui peuvent être utilisés avec la méthode hide () -
| N ° Sr. | Effet et description |
|---|---|
| 1 | blind Affiche ou masque l'élément à la manière d'un store de fenêtre: en déplaçant le bord inférieur vers le bas ou vers le haut, ou le bord droit vers la droite ou la gauche, selon la direction et le mode spécifiés . |
| 2 | bounce Fait apparaître l'élément à rebondir dans la direction verticale ou horizontale, affichant ou masquant éventuellement l'élément. |
| 3 | clip Affiche ou masque l'élément en déplaçant les bordures opposées de l'élément ensemble jusqu'à ce qu'elles se rencontrent au milieu, ou vice versa. |
| 4 | drop Affiche ou masque l'élément en lui donnant l'impression de tomber ou de tomber sur la page. |
| 5 | explode Affiche ou masque l'élément en le divisant en plusieurs parties qui se déplacent dans des directions radiales comme si elles implosaient ou explosaient depuis la page. |
| 6 | fade Affiche ou masque l'élément en ajustant son opacité. C'est la même chose que les effets de fondu de base, mais sans options. |
| sept | fold Affiche ou masque l'élément en ajustant les bordures opposées vers l'intérieur ou l'extérieur, puis en faisant de même pour l'autre ensemble de bordures. |
| 8 | highlight Attire l'attention sur l'élément en changeant momentanément sa couleur d'arrière-plan tout en affichant ou en masquant l'élément. |
| 9 | puff Développe ou contracte l'élément en place tout en ajustant son opacité. |
| dix | pulsate Règle l'opacité de l'élément en marche et en arrêt avant de s'assurer que l'élément est affiché ou masqué comme spécifié. |
| 11 | scale Développe ou réduit l'élément d'un pourcentage spécifié. |
| 12 | shake Secoue l'élément d'avant en arrière, verticalement ou horizontalement. |
| 14 | size Redimensionne l'élément à une largeur et une hauteur spécifiées. Similaire à l'échelle, sauf pour la façon dont la taille cible est spécifiée. |
| 15 | slide Déplace l'élément de sorte qu'il semble glisser sur ou hors de la page. |
| 16 | transfer Animation d'un élément de contour transitoire qui donne l'impression que l'élément est transféré vers un autre élément. L'apparence de l'élément de contour doit être définie via les règles CSS pour la classe ui-effects-transfer, ou la classe spécifiée en option. |
Exemples
Les exemples suivants illustrent l'utilisation de la méthode hide () avec différents effets répertoriés dans le tableau ci-dessus.
Effet - Aveugle
L'exemple suivant montre l'utilisation de la méthode hide () avec effet aveugle . Cliquez sur le bouton Masquer l'effet aveugle pour voir l'effet aveugle avant que l'élément ne se masque.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI hide Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler { width: 500px; height: 200px; }
#button { padding: .5em 1em; text-decoration: none; }
#effect { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect" ).hide( "blind", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
$( "#button" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler">
<div id = "effect" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button" class = "ui-state-default ui-corner-all">Blind Effect Hide</a>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML hideexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devriez voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -
Effet - Secouer
L'exemple suivant montre l'utilisation de la méthode shake () avec effet aveugle . Cliquez sur le bouton Effet de secousse Masquer pour voir l'effet de secousse avant que l'élément ne se masque.
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI hide Example</title>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"
rel = "stylesheet">
<script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- CSS -->
<style>
.toggler-1 { width: 500px; height: 200px; }
#button-1 { padding: .5em 1em; text-decoration: none; }
#effect-1 { width: 240px; height: 135px; padding: 0.4em; position: relative; }
#effect-1 h3 { margin: 0; padding: 0.4em; text-align: center; }
</style>
<script>
$(function() {
function runEffect() {
$( "#effect-1" ).hide( "shake", {times: 10, distance: 100}, 1000, callback );
};
// callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$( "#effect-1" ).removeAttr( "style" ).hide().fadeIn();
}, 1000 );
};
// set effect from select menu value
$( "#button-1" ).click(function() {
runEffect();
return false;
});
});
</script>
</head>
<body>
<div class = "toggler-1">
<div id = "effect-1" class = "ui-widget-content ui-corner-all">
<h3 class = "ui-widget-header ui-corner-all">Hide</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore.
</p>
</div>
</div>
<a href = "#" id = "button-1" class = "ui-state-default ui-corner-all">Shake Effect Hide</a>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML hideexample.htmet ouvrez-le dans un navigateur standard qui prend en charge javascript, vous devez également voir la sortie suivante. Maintenant, vous pouvez jouer avec le résultat -