Maison > interface Web > js tutoriel > Résumé des méthodes jQuery pour contrôler l'affichage, le masquage, la commutation et le slide_jquery des éléments

Résumé des méthodes jQuery pour contrôler l'affichage, le masquage, la commutation et le slide_jquery des éléments

WBOY
Libérer: 2016-05-16 16:03:37
original
1690 Les gens l'ont consulté

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

Copier le code Le code est le suivant :

$("#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 :
Copier le code Le code est le suivant :

$(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
Copier le code Le code est le suivant :

$("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 :

Copier le code Le code est le suivant :

$(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()
Copier le code Le code est le suivant :

$(".flip").click(function(){
$(".panel").slideDown();
});

Fonction jQuery Fade - fadeIn(), fadeOut(), fadeTo()
jQuery a la fonction de fondu suivante :
Copier le code Le code est le suivant :

$(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 :

Copier le code Le code est le suivant :

$(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 :
Copier le code Le code est le suivant :

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
Copier le code Le code est le suivant :


函数 描述
$(selector).hide() 隐藏被选元素
$(selector).show() 显示被选元素
$(selector).toggle() 切换(在隐藏与显示之间)被选元素
$(selector).slideDown() 向下滑动(显示)被选元素
$(selector).slideUp() 向上滑动(隐藏)被选元素
$(selector).slideToggle() 对被选元素切换向上滑动和向下滑动
$(selector).fadeIn() 淡入被选元素
$(selector).fadeOut() 淡出被选元素
$(selector).fadeTo() 把被选元素淡出为给定的不透明度
$(selector).animate() 对被选元素执行自定义动画
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal