recherche

Maison >interface Web >js tutoriel >Plusieurs usages et précautions d'animation dans jQuery

Plusieurs usages et précautions d'animation dans jQuery

高洛峰
高洛峰original
2016-12-28 09:31:441378parcourir

1. animer la structure de syntaxe 

animate(params,speed,callback)

params : un mappage contenant des attributs de style et des valeurs, tels que {key1:value1,key2:value2}

speed : paramètre de vitesse [facultatif]

rappel : fonction exécutée lorsque l'animation est terminée [facultatif]

2. Personnaliser une animation simple

Utilisez-en une Prenons un exemple simple pour illustrer comment obtenir l'effet de cliquer sur un div pour flotter horizontalement sur la page. 

<style>
 #cube{
  position:relative;/* 不加这句元素不能动 */
  width:30px;
  height:30px;
  background:red;
  cursor:pointer;
 }
</style>
<body>
 <div>
  <div id="cube"></div>
 </div>
 <script>
  $(function(){
   $("#cube").click(function(){
    $(this).animate({left:"100px"},2000)
   })
  })
 </script>

Afin de faire bouger l'élément, changez l'attribut left. Afin d'affecter les valeurs d'attribut haut, droite, bas et gauche de l'élément, la position de l'élément doit être déclarée.

Plusieurs usages et précautions danimation dans jQuery

3. Accumulation et animation d'accumulation

Dans le code précédent, l'attribut {left: "100px"} était défini en paramètre, s'il est réécrit comme {left:" =25px"}, l'effet est le suivant

Plusieurs usages et précautions danimation dans jQuery

4. Plusieurs animations

Exécuter plusieurs animations à la fois en même temps

L'exemple ci-dessus est une animation très simple. Si vous souhaitez réaliser plusieurs animations en même temps, par exemple pendant que l'élément glisse vers la droite, la hauteur de l'élément est agrandie.

Le code est le suivant : 

$(this).animate({left:"+=25px",height:"+=20px"},1000)

Plusieurs usages et précautions danimation dans jQuery

5. Exécuter plusieurs animations en séquence

Dans l'exemple ci-dessus, le glissement vers la droite et l'augmentation de la hauteur se produisent en même temps. Si vous souhaitez que le bloc glisse d'abord vers la droite puis augmente en hauteur, divisez simplement le code

comme suit : 

$(this).animate({left:"+=25px"},500)
  .animate({height:"+=20px"},500)

L'exécution d'effets d'animation comme celui-ci a une séquence appelée "file d'attente d'animation"

Plusieurs usages et précautions danimation dans jQuery

6. Exemple complet


Cliquez sur le carré pour le faire bouger vers la droite tout en augmentant son opacité de 50% à 100%, puis déplacez-le vers le haut et vers le bas, s'élargir et disparaître une fois terminé. 

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .fadeOut(&#39;slow&#39;)
   })

Lorsque vous appliquez plusieurs effets au même élément, vous pouvez mettre ces effets en file d'attente dans une chaîne.

Plusieurs usages et précautions danimation dans jQuery

7. Fonction de rappel d'animation


Dans l'exemple ci-dessus, si vous souhaitez changer le style CSS (arrière-plan : bleu) dans le dernier étape, au lieu de Fade out, s'il est traité comme d'habitude, le code pertinent est le suivant : 

$("#cube").click(function(){
    $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
    .animate({top:"40px",width:"100px"},500)
    .css("border","5px solid blue")//改动这行
   })

Cependant, la méthode css() est appelée à l'avance du temps.

Plusieurs usages et précautions danimation dans jQuery

La raison de ce problème est que la méthode css() ne sera pas ajoutée à la file d'attente d'animation, mais sera exécutée immédiatement. Vous pouvez utiliser des fonctions de rappel pour implémenter la mise en file d'attente pour les méthodes non animées.

Le code pertinent correct est le suivant : 

$("#cube").click(function(){
 $(this).animate({left:"100px",height:"100px",opacity:"1"},500)
 .animate({top:"40px",width:"100px"},500,function(){
  $(this).css("border","5px solid blue")
 })
})

Plusieurs usages et précautions danimation dans jQuery

Il est à noter que le le rappel s'applique à toutes les méthodes d'animation jquery, telles que slideDown(), show(), etc.

Résumé

Ce qui précède présente plusieurs utilisations et précautions concernant l'animation dans jquery. J'espère que le contenu de cet article pourra apporter de l'aide à l'étude ou au travail de chacun. Si vous avez des questions, vous pouvez le faire. laisser un message communiquer. Merci pour votre soutien au site Web PHP chinois.

Pour plus d'articles liés à l'utilisation et aux précautions d'animate dans jQuery, veuillez faire attention au site Web PHP chinois !

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：jQuery réalise une augmentation dynamique des nombres tridimensionnels (méthode animée)Article suivant：jQuery réalise une augmentation dynamique des nombres tridimensionnels (méthode animée)

Articles Liés

Voir plus