Plusieurs usages et précautions d'animation dans jQuery-js tutoriel-php.cn

Plusieurs usages et précautions d'animation dans jQuery

高洛峰

Libérer： 2016-12-28 09:31:44

original

1380 Les gens l'ont consulté

1. animer la structure de syntaxe

animate(params,speed,callback)

Copier après la connexion

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>

Copier après la connexion

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)

Copier après la connexion

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)

Copier après la connexion

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

Copier après la connexion

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")//改动这行
   })

Copier après la connexion

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

Copier après la connexion

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 !