FadeIn et FadeOut avec Javascript (sans jQuery)

javascript

Je continue mon apprentissage intensif de Javascript ‘pure’ avec la création de deux fonctions pour afifcher ou masquer en fondu un élement du DOM. Le code ci-dessous est assez simple et a été testé sur Firefox, Chrome, Opera et Safari. La durée de l’affichage/masquage est paramètrable, par défaut c’est 250ms. Aucune librairie Javascript n’est utilisée, l’ensemble du code utilise uniquement du Javascript de base.

 

Utilisation

Opacity.fadeIn( IdElementDOM, [dureeMs]) // affichage en fondu
  • idElementDOM =  attribut Id de l’élement HTML (Div, Table ..)
  • dureeMs = paramètre facultatif pour fixer la durée, valeur en ms, par défaut la durée est fixée à 250ms.
Opacity.fadeOut( idElement, [duree]);  // masquage en fondu

Code Javascript

/*
FadeIn and fadeOut Javascript funcs
Author : Auguste 05/2015
Version : 1.0

Tested on Firefox, Chrome, Safari and Opera
Usage : 
Opacity.fadeIn(id,[duration]);
Opacity.fadeOut(id,[duration]);

Defaut duration = 250ms

*/
var Opacity = {
  opacityDefaultDuration: 250,  // default duration
  fadeIn: function(id,duration) {
    var el = document.getElementById(id);
    if( typeof el !== "undefined" && el !== null ) {
      el.style.opacity = 0 ;
      el.style.display = 'block' ;
      if(typeof duration !== "number" || duration == 0) {
        duration = Opacity.opacityDefaultDuration ;
      }
      var step = 10/duration ;
      Opacity._setOpacity(el,step,'fadeIn') ;
    }
  }, 
  fadeOut: function(id,duration) {
    var el = document.getElementById(id);
    if( typeof el !== "undefined" && el !== null ) {
      el.style.opacity = 1 ;
      //opacity.opacityCurrent = 1 ;
      if(typeof duration !== "number" || duration == 0) {
        duration = Opacity.opacityDefaultDuration;
      }
      var step = 10/duration ;
      Opacity._setOpacity(el,step,'fadeOut');
    }
  },
  _setOpacity: function(el,step,type) {
    switch(type) {
      case 'fadeOut': {
        var op = parseFloat(el.style.opacity) - step;
        if( op > 0 ) {
          el.style.opacity  = op ;
          setTimeout( function() { 
            Opacity._setOpacity(el,step,'fadeOut'); 
            },10);
        } else {
          el.style.display = 'none';
        }
        break;
      }
      case 'fadeIn': {
       var op = step + parseFloat(el.style.opacity)  ;
        if( op < 1 ) {
          el.style.opacity = op ;
          setTimeout( function() {
            Opacity._setOpacity(el,step,'fadeIn');
          },10);
        } else {
          el.style.opacity = 1;
        }
        break;
      }
    }
  }
}

Il est possible d’utiliser le script sur plusieurs éléments en même temps avec des durées différentes.

Pas de Commentaire

Qu'en pensez-vous ?

Votre formulaire contient des erreurs, merci de corriger.