問題

2
jQuery

一文字ずつ表示されるアニメーションを作ろう!

jQueryの問題に挑戦しよう!

問題

一文字ずつ表示されるアニメーションを作ろう!

今回はデモのように入力した文字を一文字ずつフェードインするようにしましょう!

あらかじめエディタに書くコード

                    <input type="text" placeholder="ここに入力">
<div class="box"></div>
¥HTML¥
                
                    .box span{
  display: none;
}
¥CSS¥
                

期待する画面

解答と解説(一文字ずつ表示されるアニメーションを作ろう!)

解説

LINE登録して解答を見る

※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます

まずinputの内容が変化した時をトリガーにします。そしてvalで入力された内容を取得し、その文字列の長さも取得しておきます。そしてfor文の中で文字列を分割してそれぞれspanの中に入れ、それを一つずつdelayを使い遅らせてfadeInします。

さらにスキルアップしたい方は公式LINEから「jQuery」と送信すると動画が見れます。

LINE登録して動画を視聴する
あなたに合った学習プランは?LINE適正コース診断はこちら