Maison > interface Web > js tutoriel > le corps du texte

Partage d'exemples d'effet jQuery

小云云
Libérer: 2018-01-11 17:09:37
original
1580 Les gens l'ont consulté

Les opérations d'effet jQuery sont divisées en cinq catégories : 1. De base, 2. Diapositive, 3. Fondu entrant et sortant, 4. Personnalisé, 5. Paramètres. Cet article expliquera cela en détail. A une très bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

Les opérations d'effet sont divisées en cinq catégories : 1. De base, 2. Diapositive, 3. Fondu entrant et sortant, 4. Personnalisé, 5. Paramètres

show(), hide(), toggle()

Le code est le suivant :

code html :

 <p style="display: none">Hello</p>
 <input id="btn1" type="button" value="切换"/>
Copier après la connexion

code jQuery :

$("p ").show();

P est masqué dans un premier temps. Après avoir exécuté cette ligne de code, P affiche

$("p").hide();

La balise P actuelle est affichée. Après avoir exécuté cette ligne de code, P est masqué

 $("#btn1").click(function(){
  $("p").toggle("show");
 })
Copier après la connexion

Liez un événement de clic au bouton. Lorsque P est réel, laissez-le être masqué. . Si P est masqué, alors laissez-le afficher

Remarque : show(), affiche les éléments correspondants masqués.

hide(), masque l'élément affiché.

toggle() est utilisé pour lier deux ou plusieurs fonctions de gestionnaire d'événements pour répondre tour à tour à l'événement de clic de l'élément sélectionné.

slideDown(), slideUp(), slideToggle()

Le code est le suivant :

code html :

 <p></p>
 <input id="btn1" type="button" value="展开"/>
 <input id="btn2" type="button" value="收缩"/>
 <input id="btn3" type="button" value="切换"/>
Copier après la connexion

code jQuery :

 $("#btn1").click(function(){
  $("p").slideDown();
 });
  给id为btn1的按钮绑定click事件,当点击展开按钮的时候,p向下展开。

 $("#btn2").click(function(){
  $("p").slideUp();
 });
  给id为btn2的按钮绑定click事件,当点击展开按钮的时候,p向上收缩。

 $("#btn3").click(function(){
  $("p").slideToggle();
 });
Copier après la connexion

Liez l'événement click au bouton avec l'ID btn3. Lorsque p se développe vers le bas, il se rétrécit vers le haut, et vice versa.

Remarque : slideDown(), développez vers le bas.

slideUp(), rétrécit vers le haut.

slideToggle(), change la visibilité de tous les éléments correspondants via des changements de hauteur.

L'effet est le suivant :

fadeIn(), fadeOut(), fadeTo(), fadeToggle()

Le code est le suivant :

code html :

 <p></p> 
 <input id="btn1" type="button" value="淡入"/>
 <input id="btn2" type="button" value="淡出"/>
 <input id="btn3" type="button" value="切换"/>
 <input id="btn4" type="button" value="设置透明度"/>
Copier après la connexion

code jQuery :

 $("input").first().click(function(){
  $("p").fadeIn(1000);
 });
Copier après la connexion

Sélectionnez la première entrée avec le sélecteur et associez-y un événement de clic p. est masqué au début. Il s’affichera lentement en une seconde pour obtenir l’effet de fondu.

 $("input").eq(1).click(function(){
  $("p").stop().fadeOut(1000);
  //$("p").fadeOut(1000);
 });
Copier après la connexion

Sélectionnez la deuxième entrée avec le sélecteur et associez-y un événement de clic. p est maintenant affiché, et il se cachera lentement en une seconde pour obtenir l'effet de fondu.

 $("input").eq(2).click(function(){
  $("p").stop().fadeToggle(1000);
 })
Copier après la connexion

Sélectionnez la troisième entrée avec le sélecteur et associez-y un événement de clic. Lorsque p est affiché, laissez-le disparaître. Au contraire, lorsque p est masqué, laissez-le apparaître.

 $("input").eq(3).click(function(){
  $("p").stop().fadeTo(1000,0.5);
 })
Copier après la connexion

Sélectionnez la quatrième entrée avec le sélecteur, associez-y un événement de clic et définissez le temps et la transparence du fondu d'entrée (fondu de sortie).

Remarque : fadeIn(), obtient l'effet de fondu de tous les éléments correspondants grâce à des changements d'opacité.

fadeOut(), qui obtient l'effet de fondu de tous les éléments correspondants grâce à des changements d'opacité.

fadeTo(), ajuste progressivement l'opacité de tous les éléments correspondants à l'opacité spécifiée.

fadeToggle(), commute les effets de fondu entrant et sortant de tous les éléments correspondants en modifiant l'opacité.

L'effet est le suivant :

animate(), stop(), delay()

Le code est le suivant :

Code CSS :

 p{
 width:100px;
 height:100px;
 background:red;
 }
Copier après la connexion

Code HTML :

 <p>ST宋泽</p>
 <input id="btn1" type="button" value="显示效果"/>
 <input id="btn2" type="button" value="停止动画"/>
Copier après la connexion

Code jQuery :

 $("#btn1").click(function(){
  $("p").delay(2000).animate({
  "width":"300px",
  "height":"300px",
  "font-size":"4em"
  },5000,function(){
  console.log("动画完成")
  })
 });
Copier après la connexion

Lier l'événement de clic au bouton avec id btn1, lorsque vous cliquez sur le bouton Quand, avec un délai de deux secondes, la largeur, la hauteur et la taille de la police de p

changeront progressivement aux valeurs définies et "Animation terminée" sera imprimé après deux secondes.

 $("#btn2").click(function(){
  $("p").stop();
 })
Copier après la connexion

Liez l'événement click au bouton avec l'ID btn2. Lorsque p effectue une animation, cliquez sur le bouton et l'animation s'arrêtera.

Remarque : animate(), une fonction utilisée pour créer des animations personnalisées.

stop(), arrête toutes les animations en cours d'exécution sur l'élément spécifié.

delay(), définit un délai pour retarder l'exécution des éléments suivants dans la file d'attente.

L'effet est le suivant :

jQuery.fx.off, jQuery.fx.interval

jQuery.fx.off, fermez la page Toutes les animations.

jQuery.fx.interval, définit la fréquence d'images d'affichage de l'animation.

Recommandations associées :

Partager un exemple de code d'effet jQuery

HTML5 pour créer un effet jQuery d'imitation

Collection d'effets Jquery pour créer des effets spéciaux de score d'examen de santé informatique avec le code source download_jquery

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

É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