On va voir comment faire notre machine à écrire avec jQuery.

Évidemment, de base, jQuery ne va pas vous le faire tout seul ^^

Mais en configurant un petit plugin perso, on va y arriver.

1. l’essentiel

<!-- jQuery ^^ -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

2. le plugin

$.fn.machineEcrire = function(option) {

  // on prépare le plugin
  function caract (element, text, content) {

    // si le texte a une taille supp à 0, c'est qu'il reste encore des caractères
    if (text.length > 0) {

      var next = text.substr(0,1); // on récupère le caractère

      // on enlève le caractère pour garder uniquement le reste
      text = text.substr(1);

      // on ajoute les caractères 1 par 1
      $(element).html(content+next);

      // on répète la fonction après le delai
      setTimeout(function(){
        caract(element, text, content+next);
      }, option['delai']);
    }
  }

  // on configure l'élément par défaut
	option = option || { 'delai': 50 };
  // on exécute pour la 1er fois la fonction
	caract(this, $(this).html(), '');

}

Explications supplémentaires :

– $.fn instancie du plugin
– machineEcrire : le nom du plugin que l’on crée
– option nous permet de configurer un délai différent de celui par défaut
– l’attribut ‘content’ est le nouveau conteneur dans lequel on lui ajoute les caractères 1 par 1
– et les 2 this ? ? : this fait référence à l’élément, et $(this).html() récupère le contenu de cet élément

3. C’est fini ?

<!-- on prépare l'élément qui va recevoir l'effet -->
<div id="ecrire">Une personne qui n’a jamais commis d’erreurs n’a jamais tenté d’innover.</div>

Et le code pour exécuter le plugin ?

$("#ecrire").machineEcrire({ 'delai' : 100 });

Ici, je précise un nouveau délai, donc il sera utilisé à la place de celui par défaut.

Important :

Assurez-vous bien d’avoir chargé jQuery et le plugin !!!!