Effets jQuery
jQuery peut créer des effets de cache, affichage, basculement, glissement et d'animation personnalisée, etc.
Essayez-le vous-même
Essayez cet effet jQuery :
CodeW3C.com - Site de tutoriels de technologies Web de pointe
Sur CodeW3C.com, vous pouvez trouver tous les tutoriels de construction de site Web dont vous avez besoin.
Cliquez ici
Exemple
- jQuery hide()
- Démonstration de la fonction jQuery hide() simple.
- jQuery hide()
- Une autre démonstration hide(). Comment masquer une partie de texte.
- jQuery slideToggle()
- Démonstration de l'effet de panneau glissant simple.
- jQuery fadeTo()
- Démonstration de la fonction jQuery fadeTo() simple.
- jQuery animate()
- Démonstration de la fonction jQuery animate() simple.
Masquer et afficher jQuery
Grâce aux fonctions hide() et show(), jQuery permet de masquer et d'afficher des éléments HTML :
Exemple
$$("#hide").click(function(){
$$("p").hide();
});
$$("#show").click(function(){
$$("p").show();
});
Les fonctions hide() et show() peuvent toutes deux accepter deux paramètres optionnels : speed et callback.
Syntaxe :
$$(selector).hide(speed,callback) $$(selector).show(speed,callback)
speed Les paramètres définissent la vitesse d'affichage ou de masquage. Vous pouvez configurer ces valeurs : "slow", "fast", "normal" ou en millisecondes.
callback Les paramètres sont les noms des fonctions exécutées après la fin des fonctions hide ou show. Vous apprendrez plus à ce sujet dans les chapitres suivants de ce tutoriel. callback Connaissances des paramètres.
Exemple
$("button").click(function(){
$$("p").hide(1000);
});
Basculer jQuery
La fonction toggle() jQuery utilise les fonctions show() ou hide() pour basculer l'état de visibilité des éléments HTML.
Masquer les éléments affichés et afficher les éléments masqués.
Syntaxe :
$$(selector).toggle(speed,callback)
speed Les paramètres peuvent être définis sur ces valeurs : "slow", "fast", "normal" ou en millisecondes.
Exemple
$("button").click(function(){
$$("p").toggle();
});
callback Le paramètre est le nom de la fonction qui est exécutée après la fin de la fonction. Vous apprendrez plus à ce sujet dans les chapitres suivants de ce tutoriel. callback Connaissances des paramètres.
Fonctions de glissement jQuery - slideDown, slideUp, slideToggle
jQuery possède les fonctions de glissement suivantes :
$$(selector).slideDown(speed,callback) $$(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)
speed Les paramètres peuvent être définis sur ces valeurs : "slow", "fast", "normal" ou en millisecondes.
callback Le paramètre est le nom de la fonction qui est exécutée après la fin de la fonction. Vous apprendrez plus à ce sujet dans les chapitres suivants de ce tutoriel. callback Connaissances des paramètres.
Exemple de slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Exemple de slideUp()
$(".flip").click(function(){
$(".panel").slideUp();
})
Exemple de slideToggle()
$(".flip").click(function(){
$(".panel").slideToggle();
});
Fonctions fade jQuery - fadeIn(), fadeOut(), fadeTo()
jQuery possède les fonctions fade suivantes :
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)
speed Les paramètres peuvent être définis sur ces valeurs : "slow", "fast", "normal" ou en millisecondes.
Dans la fonction fadeTo() opacity Le paramètre détermine la réduction à l'opacité donnée.
callback Le paramètre est le nom de la fonction qui est exécutée après la fin de la fonction. Vous apprendrez plus à ce sujet dans les chapitres suivants de ce tutoriel. callback Connaissances des paramètres.
Exemple de fadeTo()
$("button").click(function(){
$("div").fadeTo("slow",0.25);
});
Exemple de fadeOut()
$("button").click(function(){
$("div").fadeOut(4000);
});
Animation personnalisée jQuery
La syntaxe de la fonction jQuery pour créer une animation personnalisée :
$(selector).animate({params},[duration],[easing],[callback])
Les paramètres clés sont paramsIl définit les propriétés CSS générant l'animation. Plusieurs de ces propriétés peuvent être définies simultanément :
$(selector).animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Le second paramètre est durationIl définit le temps appliqué à l'animation. La valeur définie est : "slow", "fast", "normal" ou en millisecondes.
Exemple 1
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({height:300},"slow");
$("#box").animate({width:300},"slow");
$("#box").animate({height:100},"slow");
$("#box").animate({width:100},"slow");
});
});
</script>
Exemple 2
<script type="text/javascript">
$(document).ready(function(){
$("#start").click(function(){
$("#box").animate({left:"100px"},"slow");
$("#box").animate({fontSize:"3em"},"slow");
});
});
</script>
Les éléments HTML sont par défaut positionnés statiquement et ne peuvent pas être déplacés.
Pour permettre à un élément de pouvoir être déplacé, configurez la position CSS en relative ou absolute.
jQuery Effets - depuis cette page
| Fonction | Description |
|---|---|
| $(selector).hide() | Cacher les éléments sélectionnés |
| $(selector).show() | Afficher les éléments sélectionnés |
| $(selector).toggle() | Basculer (cacher/afficher) les éléments sélectionnés |
| $(selector).slideDown() | Défiler vers le bas (afficher) les éléments sélectionnés |
| $(selector).slideUp() | Défiler vers le haut (cacher) les éléments sélectionnés |
| $(selector).slideToggle() | Basculer entre le défilement vers le haut et le bas des éléments sélectionnés |
| $(selector).fadeIn() | Fondu des éléments sélectionnés |
| $(selector).fadeOut() | Fondu des éléments sélectionnés |
| $(selector).fadeTo() | Fondu des éléments sélectionnés à une opacité donnée |
| $(selector).animate() | Appliquer une animation personnalisée aux éléments sélectionnés |
Pour un manuel de référence complet, veuillez visiter notre Manuel de référence des effets jQuery.
