Easy-Micro

LANGAGE JavaScript
Animations

Animation JQuery avec la méthode animate()

La méthode animate()

$('p').animate({
    width : '150px',
    fontSize : '35px',
    marginTop : '50px'
});
Ces arguments sont facultatifs ; par défaut, ils sont réglés respectivement à normal, swing et null

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)
slow correspond à 600 millisecondes et fast à 400 millisecondes

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éaire

complete : 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 !');
});
Source : openclassrooms.com

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>
offset().top récupère la position absolue d'un élément. Attention de bien noter l'attribut ID dans la balise a. Si vous devez rajouter ce code avec un JQuery existant (comme le bouton de retour en haut de page ci-dessus), n'oubliez pas de l'inclure à l'intérieur de la fonction READY. Notez enfin, que ce code fonctionne parfaitement pour un lien allant vers le bas de l'écran.

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.

Flux RSS Easy-Micro - Abonnez-vous Easy-Micro [ François Bisch ]