jQueryAnimation
Googleでログイン
問題2：一文字ずつ表示されるアニメーションを作ろう！
今回はデモのように入力した文字を一文字ずつフェードインするようにしましょう！
あらかじめエディタに書くコード
<input type="text" placeholder="ここに入力">
<div class="box"></div>
¥HTML¥
.box span{
display: none;
}
¥CSS¥
期待する画面
解答ソースコード
$(function () {
$("input").change(function(){
$(".box").empty();
var text=$("input").val();
var textNum=text.length;
for(var i=0;i<textNum;i++){
$(".box").append("<span>"+text.substr(i,1)+"</span>");
$(".box span").eq(i).delay(i*500).fadeIn(1000);
}
});
});
¥JavaScript¥
解説
まずinputの内容が変化した時をトリガーにします。そしてvalで入力された内容を取得し、その文字列の長さも取得しておきます。そしてfor文の中で文字列を分割してそれぞれspanの中に入れ、それを一つずつdelayを使い遅らせてfadeInします。
ログインして解答を見る
完了にする！
活動記録をTweetする
