JavaScriptAnimations
Animation JQuery avec la méthode animate()
La méthode animate()
$('p').animate({
width : '150px',
fontSize : '35px',
marginTop : '50px'
});duration : le temps de déroulement
Avec le temps... slow, normal, fast ou une durée en millisecondes$('p').animate({
width : '150px'
}, 1000); // Exemple avec 1000ms (= 1s)easing : l'évolution de l'animation
Swing (par défaut: de plus en plus vite) ou linear$('p').animate({
width : '150px'
}, { easing : 'linear' }); // l'animation se déroulera de façon linéairecomplete : la fonction de retour
La fonction de retour, plus communément appelée callback, est une action qui se lancera une fois l'animation terminée. Il suffit de donner une fonction anonyme en guise d'argument :$('p').animate({
width : '150px'
}, function(){
alert('Animation terminée !');
});Tous ensemble
$('p').animate({
width : '150px'
}, {
duration : 1000,
easing : 'linear',
complete : function(){
alert('Animation terminée !');
}
});Version plus courte
$('p').animate({
width : '150px'
}, 1000, 'linear', function(){
alert('Animation terminée !');
});Effet Jquery de scroll fluide (smooth scroll ou défilement fluide)
<a id="haut"></a>
<a href="#haut" class="mascroll" title="Haut de page"><img src="images/haut1.png" alt="Haut"></a>
<script src="js/jquery.js"></script> // appel de la bibliothèque jQuery
<script>
$(function() {
$('.mascroll').on('click', function() {
let monlien = $(this).attr('href'); // récupère l'adresse du lien
let maspeed = 750; // Durée de l'animation (en ms)
$('html, body').animate( { scrollTop: $(monlien).offset().top }, maspeed );
return false;
});
});
</script>Fonction callback
Une fonction callback (ou fonction de rappel en français) est une fonction exécutée lorsqu'une autre fonction a terminé de s'exécuter.$(function() {
$(".monimg").fadeOut("slow",function(){
$(this).fadeIn("slow");
});
});Ce code fait disparaître puis réapparaître progressivement les images de classe monimg.
