JqueryUI - Effet
Ce chapitre abordera les effect()méthode, qui est l'une des méthodes utilisées pour gérer les effets visuels jQueryUI. effect () applique un effet d'animation aux éléments sans avoir à l'afficher ou à le masquer.
Syntaxe
le effect() méthode a la syntaxe suivante -
.effect( effect [, options ] [, duration ] [, complete ] )| Sr.No. | 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 . En outre, 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 pouvant être utilisés avec la méthode effects () -
| Sr.No. | 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 le sens vertical ou horizontal, 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 morceaux qui se déplacent dans des directions radiales comme s'ils implosaient ou explosaient de 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 modifiant 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. |
| 13 | size Redimensionne l'élément à une largeur et une hauteur spécifiées. Similaire à l'échelle, sauf pour la manière dont la taille cible est spécifiée. |
| 14 | slide Déplace l'élément de sorte qu'il semble glisser sur ou hors de la page. |
| 15 | 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 des 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 effect () avec différents effets répertoriés dans le tableau ci-dessus.
Effet - Secouer
<!doctype html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<title>jQuery UI effect 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>
#box-1 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-1').click(function() {
$( "#box-1" ).effect( "shake", {
times: 10,
distance: 100
}, 3000, function() {
$( this ).css( "background", "#cccccc" );
});
});
});
</script>
</head>
<body>
<div id = "box-1">Click On Me</div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML effectexample.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 - exploser
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI effect 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>
#box-2 {
height: 100px;
width: 100px;
background: #b9cd6d;
}
</style>
<script>
$(document).ready(function() {
$('#box-2').click(function() {
$( "#box-2" ).effect({
effect: "explode",
easing: "easeInExpo",
pieces: 4,
duration: 5000
});
});
});
</script>
</head>
<body>
<div id="box-2"></div>
</body>
</html>Sauvegardons le code ci-dessus dans un fichier HTML effectexample.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 -