Easy-Micro

LANGAGE JavaScript
Animations

Animations et effets JQuery

Les effets JQuery

  • .show() : affiche le(s) élément(s) sélectionné(s)
  • .hide() : masque le(s) élément(s) sélectionné(s)
  • .toggle() : affiche ou masque le(s) élément(s) sélectionné(s) en fonction de son/leur état actuel
  • .fadeIn() : fait apparaître en fondu le(s) élément(s) sélectionné(s)
  • .fadeOut() : fait disparaître en fondu le(s) élément(s) sélectionné(s)
  • .fadeTo() : amène progressivement le(s) élément(s) sélectionné(s) à une opacité donnée
  • .slideUp() : masque le(s) élément(s) sélectionné(s) avec un défilement vers le haut
  • .slideDown() : masque le(s) élément(s) sélectionné(s) avec un défilement vers le bas
  • .slideToggle() : affiche ou masque le(s) élément(s) sélectionné(s) avec un défilement en fonction de leur état actuel.

Effet d'apparition/Disparition

Méthodes show() et hide() pour le coucou/caché
<script>
$(function() {
    $('li:even').css('background','yellow');
    $('#monbouton').click(function() {
       $('li:even').show('slow');
    });
});
</script>
Le code jQuery ci-dessus met les lignes pairs d'une liste (li:even) en jaune lorsque l'on clic sur le bouton monbouton
  Source : openclassrooms.com

Effet d'apparition/Disparition avec fadeIn et fadeOut


<img src="images/monlogo.png" id="monimg" alt="">

<script>
$(document).ready(function() {
   setInterval(function() { // setInterval pour la répétition
    
   $(".monimg").fadeOut("slow",function(){
      $(this).fadeIn("slow"); // ou bien .fadeIn(1000)
   });
    
   }, 1000); // durée en milliseconde (1000 = 1 seconde)
});
</script>
setInterval(function() {}, 1000); permet la répétition toute les 1000 millisecondes

Effet slideToggle

Cliquez pour développer ou fermer
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});
</script>
<style> 
#panel, #flip {
  padding: 5px;
  text-align: center;
  background-color: #e5eecc;
}

#panel {
  padding: 50px;
  display: none;
}
</style>
</head>
<body>
 
<div id="flip">Cliquez pour développer ou fermer</div>
<div id="panel">Hello world!</div>

</body>
</html>

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