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-typewritewebkitでしかみていないですが。
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);
関連するトピックス