Maison > interface Web > js tutoriel > Code JavaScript pour animer du texte

Code JavaScript pour animer du texte

php中世界最好的语言
Libérer: 2018-03-16 16:18:41
original
2589 Les gens l'ont consulté

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);
    });
  });
  
};
Copier après la connexion

Comment utiliser :

$(&#39;p&#39;).animateText(15, &#39;foo&#39;);
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal