jQuery Easing

jQuery est un peu limité en terme de easing comme nous l'avons vu sur le chapitre consacré à la fonction animate. Il peut être judicieux d'ajouter jQuery UI pour disposer de plus de fonctionnalités.
Vous trouverez ici toutes les fonctions de easing pour jQuery UI

Il existe une alternative à jQuery UI c'est la librairie : jquery.easing

Cette librairie ajoute 30 méthodes de easing
Pour l'utiliser, il faut inclure jQuery et jQuery easing, ci-dessous en CDN :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
Vous pouvez aussi télécharger jquery easing ici : Télécharger l'un de ces 2 fichiers :
- jquery.easing.js
- jquery.easing.min.js

Remarque importante : des lenteurs dans l'environnement bootstrap. Comparez la fluidité des animations ci-dessous avec cette page ou code est brut :
animations fluides avec jQuery Easing

Exemple 1 easeOutBounce
Ci-dessous le code de l'animation :
$("#b1").click(function(){
  jQuery.easing.def = 'easeOutBounce';
  $('#anim1').animate({"margin-left": '200'}, 'slow');
});


Exemple 2 easeOutElastic
Ci-dessous le code de l'animation :
$("#b2").click(function(){
  jQuery.easing.def = 'easeOutBounce';
  $('#anim1').animate({"margin-left": '200'}, 'slow');
});


Exemple 3 easeOutBack
Ci-dessous le code de l'animation :
$("#b2").click(function(){
  jQuery.easing.def = 'easeOutBack';
  $('#anim1').animate({"margin-left": '200'}, 'slow');
});


Le github : jquery.easing

Liste des options de easing : https://easings.net/
La doc Vue.js
A propos

J'exerce depuis plusieurs années le métier de développeur Front-End. Dernièrement j'ai créé ...

Qui suis-je
Qui maîtrise Internet, maîtrise le monde
Jules Cesar