Comment écrire une animation en jquery

jQuery est une puissante bibliothèque JavaScript qui simplifie grandement le travail des développeurs et des concepteurs. Parmi eux, l’effet d’animation de Jquery est devenu l’un des éléments les plus importants du design. Cet article explique comment utiliser jQuery pour créer des effets d'animation.

1. L'effet d'animation jQuery

L'effet d'animation jQuery est généralement implémenté à l'aide de la fonction animate(). Il permet aux programmeurs de créer des animations de transition sur une ou plusieurs propriétés CSS. La fonction animate() nécessite au moins deux paramètres : la propriété CSS à modifier et l'heure du changement, avec un troisième paramètre facultatif spécifiant une fonction à exécuter une fois terminée.

L'exemple suivant montrera comment modifier les propriétés CSS d'un élément pour créer un effet d'animation :

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px', opacity: '0.5'}, 2000);
  });
});

Dans l'exemple ci-dessus, lorsque l'on clique sur le bouton, le div L'élément sera se déplace de 250 pixels vers la gauche à une vitesse de 2000 ms et modifie l'opacité à 0,5.

2. La fonction animate() de jQuery

La fonction animate() de jQuery peut saisir plusieurs paramètres, notamment les propriétés CSS, la durée de modification et les fonctions.

L'exemple suivant montrera comment utiliser la fonction animate() pour modifier plusieurs propriétés CSS en même temps :

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate(
      {
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      },
      2000
    );
  });
});

Dans l'exemple ci-dessus, nous avons modifié la position et transparence de l'élément à la fois, hauteur et largeur. Ces modifications seront complétées dans un délai de 2000 ms.

3. Les paramètres de vitesse de jQuery

jQuery fournit trois paramètres de vitesse par défaut : lent, normal et rapide. Nous pouvons également utiliser des nombres pour spécifier des valeurs de vitesse. Plus le nombre est élevé, plus l'animation s'exécutera rapidement. L'exemple suivant montre comment utiliser le paramètre de vitesse :

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'}, "slow");
    $("div").animate({opacity: '0.5'}, "normal");
    $("div").animate({height: '150px', width: '150px'}, "fast");
  });
});

L'exemple ci-dessus anime l'élément à des vitesses lente, normale et rapide.

4. La fonction de rappel de jQuery

Lors de l'appel de la fonction animate(), nous pouvons lui transmettre une fonction de rappel. La fonction de rappel sera appelée immédiatement après la fin de l'exécution de la fonction animate().

L'exemple suivant montre comment utiliser la fonction de rappel :

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5'
    }, 2000, function() {
      alert("动画执行完毕!");
    });
  });
});

L'exemple ci-dessus appelle une fonction alert() après l'exécution de la fonction animate().

5. La file d'attente de jQuery

jQuery utilise une file d'attente pour stocker toutes les fonctions à exécuter. Lorsque nous utilisons la fonction animate(), la fonction ajoute en fait une fonction à la file d'attente. La file d'attente fonctionne selon le principe du premier entré, premier sorti. Donc, si nous voulons effectuer une autre tâche une fois l’animation terminée, nous devons utiliser une file d’attente.

L'exemple suivant montre comment utiliser les files d'attente pour spécifier plusieurs animations :

$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '250px'}, 2000);
    div.animate({top: '250px'}, 2000);
    div.animate({left: '0px'}, 2000);
    div.animate({top: '0px'}, 2000);
  });
});

L'exemple ci-dessus déplace l'élément vers le coin supérieur droit, puis le ramène à sa position d'origine.

6. Effacer la file d'attente de jQuery

Si vous souhaitez effacer la file d'attente pendant l'exécution de l'animation, vous devez utiliser la fonction clearQueue(). Cela supprimera toutes les fonctions ultérieures de l’animation en cours.

L'exemple suivant montre comment vider la file d'attente :

$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({left: '500px'}, 5000);
     $("div").animate({opacity: '0.0'}, 3000);
     $("div").animate({top: '200px'}, 5000);
     $("div").clearQueue();
   });
});

L'exemple ci-dessus effacera la file d'attente lorsque le mouvement atteint le milieu, c'est-à-dire que l'animation suivante ne sera pas exécuté.

7. L'animation d'arrêt de jQuery

Si vous souhaitez arrêter une animation en cours, vous pouvez utiliser la fonction stop(). Par exemple, si nous voulons arrêter l'animation ci-dessus lorsqu'un bouton d'arrêt est enfoncé, nous pouvons l'utiliser comme ceci : Événements de survol et de suppression de la souris pour démarrer et arrêter les animations :

$("button").click(function(){
  $("div").stop();
});

L'exemple ci-dessus déplacera le élément 250 pixels vers la droite au survol de la souris et revient à la position d'origine au survol de la souris.

9. Résumé

La fonction animate() de jQuery permet de créer très facilement des effets d'animation. Qu'il s'agisse d'une animation de base, de plusieurs animations ou de fonctions de rappel, vous pouvez facilement l'implémenter. Il vous suffit de comprendre les opérations de base et la syntaxe de jQuery.

Lors de la conception d'animations, nous devons juger quels effets d'animation utiliser en fonction des besoins du site Web ou de l'application. Nous pouvons ajouter des paramètres de vitesse appropriés au début de l'animation pour offrir une expérience utilisateur fluide à l'utilisateur. Vous pouvez utiliser des fonctions de rappel et des files d'attente pour effectuer toute autre opération pendant l'exécution de l'animation. A tout moment, vous pouvez utiliser les fonctions stop() et clearQueue() pour arrêter ou effacer l'animation dans la file d'attente.

Enfin, la fonction d'animation de JQuery est une compétence nécessaire pour les concepteurs, et c'est également un outil puissant pour réaliser des effets d'animation de pages Web. J'espère que cet article pourra aider tout le monde à mieux comprendre et appliquer les effets spéciaux d'animation dans 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!