-

jqueryに詳しい方に質問です。

jqueryで一文字ずつ文字を表示する方法を教えて下さい。
※プラグインなしで

p要素の文字が最初は消えていて
一文字ずつ表示したいのです。

<p>ここの文字を一文字ずつ表示したい</p>

※イメージとしてドラクエメッセージウィンドウみたいな感じです。
【参考URL】
ttp://www40.atwiki.jp/spellbound/?cmd=word&word=%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9&type=normal&page=%E3%83%89%E3%83%A9%E3%82%AF%E3%82%A8%E3%81%AE%E3%83%A1%E3%83%83%E3%82%BB%E3%83%BC%E3%82%B8%E3%82%A6%E3%82%A3%E3%83%B3%E3%83%89%E3%82%A6%E3%82%92%E4%BD%9C%E3%82%8B

詳しい方、どうかご教授ください。
よろしくお願いいたします。

みんなの回答 10 件

名無しさんの回答

一文字ずつspanでマークアップして、そのspanに対してopacityを変化させてやればいけますよ。

名無しさんの回答

自分ではどんなアプローチをしたんですか??
回答の仕方もトピ主さんのスキルによると思いますが。

名無しさんの回答

setIntervalとかsetTimeoutとか使っちゃダメなの?

名無しさんの回答

表示できれば、どうでもいいだろ。

名無しさんの回答

ここで書くべきことじゃないかもしれないけどさ、うまくいきません以上の説明がないとか、まったく分からないので全部教えてくださいとかってのはなしじゃない?ここまでは理解できるんだけど、この箇所だけ分かりませんとかならわかるんだけどさ。

名無しさんの回答

アニメーションgif

名無しさんの回答

プラグイン紹介しようと思ったらプラグインなしでって........ なんで難しい方向に....

名無しさんの回答

そのまま使うのほうだったら、プラグインじゃないんじゃないですかね?

タイプライターっぽいエフェクトを実行できる jq.typewrite :: 5509

http://5509.me/log/jq-typewrite
名無しさんの回答

webkitでしかみていないですが。

var t = 'p#id名'; 
var s = $(t).text().trim(); 
var d = 100; 
// 
$(t).text(''); 
// 
for (var i=0; i<s.length; i++) { 
 $(t).append('<span>'+s.substr(i, 1)+'</span>'); 
 $(t + ' span:last').hide().delay(d*i).show(0); 
}
名無しさんの回答

上の方のが十全だとは思いますが…
一文字ずつっていう仕様からするとアレだけれど…それっぽく見せるお手軽方法を
試してないので成否は定かじゃないけど…だめ?だめかなぁ
あとは複数行あるならこのままだとダメだけど

/* css側 */ 
p { 
 width: 0; 
 overflow: hidden; 

 
// js 
$('p').animate({width: '100%'}, 500);
最終更新日:2012-09-20 (6,301 views)

関連するトピックス

ページ上部に戻る