On m'a demandé si je pouvais trouver un effet texte dans HTML à l'aide de jQuery où je reçois une chaîne, puis la routine détecte automatiquement les mots et anime chaque mot dans, une à la fois.
sec dans l'animation montre: "Heureux"
sec dans l'animation montre: "bonne nouvelle"
sec dans l'animation montre: "bonne année"
sec dans l'animation montre: "bonne année 2011"
Chaque mot devrait "se vanter / animer" dans lentement, je pensais qu'une simple volane coulissante disparaîtrait à des pixels serait satisfaisant - mais non. Mot par mot.
Je pourrais avoir besoin d'idées sur celui-ci. Je connais des jQuery et beaucoup de JavaScript, alors je suppose que j'ai besoin d'une aide avec la partie JQuery.
Pour la liste des mots, je sortirais simplement sur "" (Espace) et accepte que ",.!" etc. font partie d'un mot.
mais comment puis-je animer ce "tableau dynamique" dans jQuery - y a-t-il un plugin quelque part ou suis-je le premier?
Je pensais que Une liste à puces pourrait aussi être le truc, puis le faire flotter horizontalement comme un menu, puis ajouter le mot comme une nouvelle balle, une fois par seconde. Mais je suis excité de voir ce que les experts ici sont présents pour la solution. : O)
édition
De la réponse marquée, j'ai ceci: La balise forte fonctionne, mais des parties du texte s'efface dans un groupe. Essayez ceci :
"Voici un texte de test. [Strong] Nous croyons que c'est mieux [/ fort] que jamais." et voir le problème.
3 Réponses :
Vous voulez l'animation "blockfadein by word" ici: http: // dev .Seankoole.com / jQuery / ui-effet / text.html
vient de sortir!
D'oh. Beaucoup mieux la réponse que la mienne. Ma faute pour utiliser Emacs au lieu de Google.
C'est une page impressionnante avec des charges d'échantillons intéressants aussi. Mais je pense que la bonne réponse doit être celle qui est la plus précise cette fois-ci. Merci pour le lien cependant. Truc cool!
@Malvolio: Je pense que vous avez fait une bonne tentative et je suis désolé que je ne puisse pas marquer plus d'une bonne réponse, mais que j'ai voté le vôtre aussi.
Le lien est mort
Exemple de travail: heureux neuf an 2011 "
crée des éléments DOM: les cache: les ajoute: Enfin, iTerate les sur eux en utilisant http://jsfiddle.net/tcdqb/1/ EDIT: Pour faire face à des balises imbriquées (un niveau profond uniquement), vous pouvez le faire: $ (allure)
.hide ()
.Appendto ('Corps')
.f. () , et .Delay () le .Fadein () de chacun de 1000 ms multiplié par l'indice actuel de l'itération.
Très bien aussi! Maintenant, je dois décider qui devrait avoir la "réponse" .. souhaite que je puisse marquer plus d'une ...
Comment puis-je initialiser la variable de chaîne de disons une plage / div avec une classe CSS appelée par exemple. "ticker": bonne année 2011
@Berggreendk: assez simple. Je vais mettre à jour ma réponse dans une minute. EDIT: Mise à jour. Je change la première ligne de code à var str = $ ('span.ticker'). Texte (); .
MDR! J'ai vraiment besoin d'avoir plus d'expérience JQuery. Ces rochers! Merci beaucoup!
Oh non, ils veulent utiliser fort sur certains mots. Des idées?
@Berggreendk: Tu veux dire sur certains des mots aléatoires ou sur ceux spécifiques. Et sont les mots puissants comme celui-ci sur la page à l'origine, ou est-il ajouté?
Actuellement, ses mots ont été marqués dans un puissant..Je suis a ajouté ma tentative de ma question. : o)
En quelque sorte, la fonction ajoute [span style = "Affichage: bloc"] sur chaque mot du message d'accueil dans Firefox ??? Je ne peux pas la remplacer ... étrange.
@Berggreendk: Je viens de remarquer vos commentaires. Je vais prendre un autre regard. (Au fait, avec Split (/ \ s + /) Vous passez un express régulier qui dit "Split Wharerever Un ou plusieurs caractères adjacents sont trouvés" .
@Berggreendk: Voici un exemple mis à jour. ne fonctionnera que pour les étiquettes nichées un niveau profond. Je vais l'ajouter à ma réponse.
@Patrick DW: Vous êtes incroyable !!! : o) Merci maintenant, cela fonctionne aussi avec Firefox. Un script un peu plus complexe, mais cela fonctionne. Essayer de comprendre ce que vous avez fait avec NODETYPE, etc. mais c'est mon problème de curiosité.
@Berggreendk: Il est utilisé pour distinguer un nœud texte et un élément, car vous avez besoin d'une technique différente pour manipuler leur contenu. Voici une liste des différents types de noeuds. Les types 1 et 3 sont les plus susceptibles que vous devrez faire référence. La méthode .Contents () est similaire à .children () sauf qu'il récupère également des nœuds de texte. Donc, lorsque nous iTerons-nous en utilisant .fe. () , nous testons chacun à voir lequel nous avons actuellement.
@Patrick DW: cool avec l'explication supplémentaire, les pouces de moi!
Si je dois tellement la même chose avec des balles, alors cela ne fonctionne pas. Combien devrait-il être fait?
Je ne suis pas un expert, mais peut-être que vous pensez cela. Que diriez-vous:
var fadeWordsIn = function(elem$) {
var txt = elem$.text().split(' ');
elem$.empty();
var pushIt = function() {
if (txt.length) {
var word = txt.shift();
var span$ = $("<span>" + word + " </span>");
elem$.append(span$);
span$.hide().fadeIn(1000, pushIt);
}
};
pushIt();
};
Merci, c'est ce que j'avais visé.