ログイン
問題2

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

アイコン画像

問題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します。
ログインして解答を見る
完了にする!
twitterのアイコン
活動記録をTweetする
LINEの友達追加でお役立ち動画をGET!!
LINEの友達追加でお役立ち動画をGET!!

閉じる