jquery implémente les effets de glissement code

jquery implémente les effets de glissement code_jquery

WBOY

Libérer： 2016-05-16 15:46:07

original

1245 Les gens l'ont consulté

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>

Copier après la connexion

code slide.js :

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

Copier après la connexion

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");

Copier après la connexion

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."); 
});

Copier après la connexion

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");

Copier après la connexion

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."); 
});

Copier après la connexion

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");

Copier après la connexion

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."); 
});

Copier après la connexion

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