Masquer et afficher jQuery
Grâce aux deux fonctions hide() et show(), jQuery prend en charge le masquage et l'affichage des éléments HTML :
Exemple
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
hide() et show() peuvent définir deux paramètres facultatifs : la vitesse et le rappel.
Syntaxe :
$(selector).hide(speed,callback)
$(selector).show(speed,callback)
Le paramètre speed spécifie la vitesse à laquelle afficher ou masquer. Ces valeurs peuvent être définies : "lent", "rapide", "normal" ou millisecondes.
Le paramètre de rappel est le nom de la fonction à exécuter une fois la fonction masquer ou afficher terminée. Vous en apprendrez plus sur le paramètre de rappel plus loin dans ce didacticiel.
Exemple
$("bouton").click(function(){
$("p").hide(1000);
});
Le paramètre de rappel est le nom de la fonction à exécuter une fois cette fonction terminée. Vous en apprendrez plus sur le paramètre de rappel plus loin dans ce didacticiel.
Fonction coulissante jQuery - slideDown, slideUp, slideToggle
jQuery a les fonctions de glissement suivantes :
$(selector).slideDown(speed,callback)
$(selector).slideUp(speed,callback)
$(selector).slideToggle(speed,callback)
Le paramètre vitesse peut définir ces valeurs : « lent », « rapide », « normal » ou millisecondes.
Le paramètre de rappel est le nom de la fonction à exécuter une fois cette fonction terminée. Vous en apprendrez plus sur le paramètre de rappel plus loin dans ce didacticiel.
Instance slideDown()
$(".flip").click(function(){
$(".panel").slideDown();
});
Fonction jQuery Fade - fadeIn(), fadeOut(), fadeTo()
jQuery a la fonction de fondu suivante :
$(selector).fadeIn(speed,callback)
$(sélecteur).fadeOut(vitesse, rappel)
$(selector).fadeTo(vitesse, opacité, rappel)
Le paramètre vitesse peut définir ces valeurs : « lent », « rapide », « normal » ou millisecondes.
Le paramètre opacity dans la fonction fadeTo() spécifie le fondu vers une opacité donnée.
Le paramètre de rappel est le nom de la fonction à exécuter une fois cette fonction terminée. Vous en apprendrez plus sur le paramètre de rappel plus loin dans ce didacticiel.
Animation personnalisée jQuery
Syntaxe pour créer des animations personnalisées à l'aide de la fonction jQuery :
$(selector).animate({params},[duration],[easing],[callback])
Les paramètres clés sont des paramètres. Il définit les propriétés CSS qui animent. Plusieurs de ces propriétés peuvent être définies simultanément :
animer({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});
Le deuxième paramètre est la durée. Il définit le temps utilisé pour s'appliquer à l'animation. Les valeurs qu'il définit sont : « lent », « rapide », « normal » ou millisecondes.
Exemple
函数 |
描述 |
$(selector).hide() |
隐藏被选元素 |
$(selector).show() |
显示被选元素 |
$(selector).toggle() |
切换(在隐藏与显示之间)被选元素 |
$(selector).slideDown() |
向下滑动(显示)被选元素 |
$(selector).slideUp() |
向上滑动(隐藏)被选元素 |
$(selector).slideToggle() |
对被选元素切换向上滑动和向下滑动 |
$(selector).fadeIn() |
淡入被选元素 |
$(selector).fadeOut() |
淡出被选元素 |
$(selector).fadeTo() |
把被选元素淡出为给定的不透明度 |
$(selector).animate() |
对被选元素执行自定义动画 |