Easy-Micro

LANGAGE JavaScript
Effets JQuery

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>

Un bouton Jquery de retour en haut de page qui apparaît et disparaît

<div id="divdutop">
<a style="display:block; position:fixed; bottom:15px; right:50px; opacity: 1.0;" href="#haut" title="Haut de page">
<img src="images/haut1.png" style="border-style:none; width:42px; height:42px;" id="gototop" OnMouseOut="document.getElementById('gototop').src='images/haut1.png'" OnMouseOver="document.getElementById('gototop').src='images/haut2.png'" alt="Haut de page"></a></div>

<script>
$(document).ready(function() {

   $("#divdutop").hide(); // cache le div de l'image haut

   $(window).scroll(function () {
   if ($(this).scrollTop() > 300 ) { // si le scroll est sup à 300
      $('#divdutop').fadeIn(500); // faire apparaitre le div de l'image haut
   } else {
      $('#divdutop').fadeOut(500); // sinon fait disparaître le div de l'image haut
   }
});
});
</script>

> Code à copier coller APRES l'appel de la librairie Jquery qui doit être en MINified mais pas en SLIM. Idéalement sans les attributs integrity et crossorigin. Exemple :
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Fonction javascript qui rajoute 25 fois dans un div monTexte, la phrase qu'écrit Jack Nicholson dans shining (histoire d'avoir du contenu :-)
const jack = function(){
    for(let i= 1; i < 25;i++) {
        document.getElementById('monTexte').innerHTML += 'All Work and no play makes Jack a Dull Boy<br><br>';
        }
}
window.onload = jack;
Plugin pour saisir du JQuery dans VSC (Visual Studio Code): JQuery code snipet

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