問題
2
jQueryAnimation
一文字ずつ表示されるアニメーションを作ろう！
jQueryAnimationの問題に挑戦しよう！
問題
「一文字ずつ表示されるアニメーションを作ろう！」
今回はデモのように入力した文字を一文字ずつフェードインするようにしましょう！
あらかじめエディタに書くコード
<input type="text" placeholder="ここに入力">
<div class="box"></div>
¥HTML¥
.box span{
display: none;
}
¥CSS¥
期待する画面
解答と解説
解説
LINE登録して解答を見る
※ご登録後すぐに解答閲覧用URLが
LINEで届きます
まずinputの内容が変化した時をトリガーにします。そしてvalで入力された内容を取得し、その文字列の長さも取得しておきます。そしてfor文の中で文字列を分割してそれぞれspanの中に入れ、それを一つずつdelayを使い遅らせてfadeInします。
