Code JavaScript pour animer du texte

Cette fois, je vais vous apporter le code JavaScript pour animer du texte. Quelles sont les précautions pour utiliser du code JavaScript pour animer du texte. Prenons un cas pratique. regarde.

Parfois, vous souhaitez ajouter une animation à votre texte pour faire bouger chaque mot qu'il contient. Vous pouvez utiliser le code du plug-in jQuery suivant pour obtenir cet effet. Bien sûr, vous devez combiner un style de transition CSS3 pour obtenir de meilleurs résultats.

$.fn.animateText = function(delay, klass) {  
  var text = this.text();  var letters = text.split('');  
  return this.each(function(){    var $this = $(this);
    $this.html(text.replace(/./g, &#39;<span class="letter">$&</span>&#39;));
    $this.find(&#39;span.letter&#39;).each(function(i, el){
      setTimeout(function(){ $(el).addClass(klass); }, delay * i);
    });
  });
  
};

Comment utiliser :

$('p').animateText(15, 'foo');

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour un contenu plus passionnant, veuillez faire attention au site Web chinois php. autres articles connexes !

Lecture recommandée :

Extrait de code JavaScript pour déterminer si une date est valide

Explication détaillée de la boucle d'événement du nœud .js

Mécanisme d'exécution de JavaScript Pourquoi JavaScript est monothread

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!