recherche

Maison >interface Web >js tutoriel >jquery implémente les effets de glissement code_jquery

jquery implémente les effets de glissement code_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBoriginal
2016-05-16 15:46:071300parcourir

Dans le projet, il est nécessaire d'utiliser jquery pour obtenir l'effet de glissement, donc le contenu pertinent est organisé comme suit. L'introduction suivante est très détaillée, avec une description textuelle et une analyse de code. Les amis qui en ont besoin peuvent venir. apprendre.

Première méthode de mise en œuvre :

.slideUp([duration][,complete])——L'élément cible glisse vers le haut et est masqué
; .slideDown([duration][,complete])——L'élément cible glisse vers le bas pour s'afficher
; .slideToggle([duration][,complete])——Si l'élément cible est masqué, faites glisser vers le bas pour l'afficher, sinon faites-le glisser vers le haut pour le masquer
; Remarque : la durée est l'intervalle de temps pour l'exécution de la méthode et complète est la fonction de rappel. 

<!DOCTYPE html> 
<html lang="zh_CN"> 
<head> 
 <meta charset="UTF-8"> 
 <title>滑动效果</title> 
 <script src="js/jquery-2.1.3.min.js"></script> 
 <script src="js/slide.js"></script> 
 <style> 
  img{ 
   width:500px; 
  } 
 </style> 
</head> 
<body> 
<div> 
 <div> 
  <button id="btn1">向上划入隐藏</button> 
  <button id="btn2">向下滑出显示</button> 
  <button id="btn3">向上划入隐藏/向下滑出显示</button> 
 </div> 
 <img src="images/2.jpg"/> 
</div> 
</body> 
</html>

code slide.js : 

/*滑动效果*/ 
$(document).ready(function(){ 
 //向上滑入 
 $('#btn1').click(function(){ 
  $('img').slideUp(2000); 
 }); 
 //向下滑出 
 $('#btn2').click(function(){ 
  $('img').slideDown(2000); 
 }); 
 //切换滑动 
 $('#btn3').click(function(){ 
  $('img').slideToggle(2000); 
 }); 
})

Méthode de mise en œuvre deux :

1. effet jQuery___ (effet coulissant)

slideDown(vitesse, [rappel])

Aperçu
Affiche dynamiquement tous les éléments correspondants en modifiant leur hauteur (en augmentant vers le bas), déclenchant éventuellement une fonction de rappel une fois l'affichage terminé.
Cet effet d'animation ajuste uniquement la hauteur de l'élément, permettant aux éléments correspondants d'être affichés de manière "coulissante". Dans jQuery 1.3, le remplissage et la marge supérieur et inférieur seront également animés et l'effet sera plus fluide.

Paramètres

speedString,Nombre

Une chaîne de l'une des trois vitesses prédéterminées (« lente », « normale » ou « rapide ») ou une valeur en millisecondes représentant la durée de l'animation (telle que : 1000)
rappel (facultatif)FonctionFonction

Fonction exécutée lorsque l'animation est terminée

Exemple

Description :

Faites glisser lentement le paragraphe vers le bas en 600 millisecondes

Code jQuery : 

$("p").slideDown("slow");

Description :

Utilisez 200 millisecondes pour faire glisser rapidement le paragraphe vers le bas, puis une boîte de dialogue apparaîtra

Code jQuery : 

$("p").slideDown("fast",function(){ 
 alert("Animation Done."); 
});

slideUp(vitesse, [rappel])

Aperçu

Masquez dynamiquement tous les éléments correspondants en modifiant leur hauteur (en diminuant vers le haut), en déclenchant éventuellement une fonction de rappel une fois le masquage terminé.
Cet effet d'animation ajuste uniquement la hauteur de l'élément, permettant de masquer les éléments correspondants de manière "coulissante". Dans jQuery 1.3, le remplissage et la marge supérieur et inférieur seront également animés et l'effet sera plus fluide.

Paramètres

speedString,Nombre

Une chaîne de l'une des trois vitesses prédéterminées (« lente », « normale » ou « rapide ») ou une valeur en millisecondes représentant la durée de l'animation (telle que : 1000)

rappel (facultatif)Fonction

Fonction exécutée lorsque l'animation est terminée

Exemple

Description :

Faites glisser lentement le paragraphe vers le haut en 600 millisecondes

Code jQuery : 

$("p").slideUp("slow");

Description :

Utilisez 200 millisecondes pour faire glisser rapidement le paragraphe vers le haut, puis une boîte de dialogue apparaîtra

Code jQuery : 

$("p").slideUp("fast",function(){ 
 alert("Animation Done."); 
});

slideToggle(vitesse, [rappel])

Aperçu

Bascule la visibilité de tous les éléments correspondants via un changement de hauteur et déclenche éventuellement une fonction de rappel lorsque la bascule est terminée.
Cet effet d'animation ajuste uniquement la hauteur de l'élément, permettant aux éléments correspondants d'être masqués ou affichés de manière "coulissante". Dans jQuery 1.3, le remplissage et la marge supérieur et inférieur seront également animés et l'effet sera plus fluide.

Paramètres

speedString,Nombre

Une chaîne de l'une des trois vitesses prédéterminées (« lente », « normale » ou « rapide ») ou une valeur en millisecondes représentant la durée de l'animation (telle que : 1000)

rappel (facultatif)Fonction
Fonction exécutée lorsque l'animation est terminée

Exemple

Description :

Faites glisser lentement le paragraphe vers le haut ou vers le bas pendant 600 millisecondes

Code jQuery : 

$("p").slideToggle("slow");

Description :

Utilisez 200 millisecondes pour faire glisser rapidement le paragraphe vers le haut ou vers le bas, puis une boîte de dialogue apparaîtra

Code jQuery : 

$("p").slideToggle("fast",function(){ 
 alert("Animation Done."); 
});

Le contenu ci-dessus est le code jquery pour implémenter des effets de glissement. J'espère qu'il vous plaira.

Déclaration：
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
Article précédent：Comment déterminer le type de variable dans les compétences javascript_javascriptArticle suivant：Comment déterminer le type de variable dans les compétences javascript_javascript

Articles Liés

Voir plus