Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@yamatech

jQueryで1文字ずつタイプ表示するテスト (1)

More than 5 years have passed since last update.

jQueryで1文字ずつタイプ表示するテスト (1)

まずは手始めに "Hello, World!!" 1行だけ試してみた。


HTMLファイル作成
index.html
<!DOCTYPE html>

<html lang="ja">

<head>
    <meta charset="utf-8">
    <title>test</title>
</head>

<body>
    <div id="test"></div> // ここにテキストを表示する

    // jsファイルとjQuery読み込み
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="test.js"></script>
</body>

</html>

JavaScriptファイル作成
test.js
$(function() {
    var txt = "Hello, World!!";
    var txtArr = txt.split("");
    var count = 0;

    var txtCount = function() {
        var timer = setTimeout(txtCount, 250);
        $('#test').append(txtArr[count]);
        count++;
        if (count == txtArr.length) {
            clearTimeout(timer);
        }
    }

    txtCount();

});

解説

変数 txt に代入されている "Hello, World!!" を index.html の <div id="test"></div> に表示する。
1文字ずつ順番に表示するために、まず変数 txt の内容を split("") で1文字ずつに分割して、変数 txtArr に配列として格納。
後に表示されていく文字数のカウンターとして変数 count を作り 0 で初期化。

ここまでが

    var txt = "Hello, World!!";
    var txtArr = txt.split("");
    var count = 0;

次に実際に動作させる関数を格納する変数 txtCount の作成。

    var txtCount = function() {
        var timer = setTimeout(txtCount, 250);
        $('#test').append(txtArr[count]);
        count++;
        if (count == txtArr.length) {
            clearTimeout(timer);
        }
    }

setTimeoutで txtCount を指定した時間(ここでは250)一定間隔で繰り返し動作させる。

var timer = setTimeout(txtCount, 250);

count++ を繰り返し、表示される文字数を増やして追加していく。
txtArr 配列から count の順番で一つずつ取り出して、htmlファイルの <div id="test"> に表示。

$('#test').append(txtArr[count]);
count++;

ここで注意すべき点は、html や text メソッドだと文字が上書きされてしまい、
文章として続けて表示されず1文字1文字が入れ替わって表示されるだけなので、
append メソッド で1文字表示されたら続けて後に1文字追加されるようにする。

もし count が txtArr 配列の数に到達したらタイマーを止める。

if (count == txtArr.length) {
       clearTimeout(timer);
}

txtCount( ); で実行すると1文字ずつタイプ表示するアニメーションの出来上がり。


サンプル

--> 実行サンプル


関連記事

>>「jQueryで1文字ずつタイプ表示するテスト (1)」

「jQueryで1文字ずつタイプ表示するテスト (2) 改行編」
http://qiita.com/R2Y_mn/items/0598ebd3d0a89cad34a1

「jQueryで1文字ずつタイプ表示するテスト (3) 点滅カーソル付けた編」
http://qiita.com/R2Y_mn/items/5255cc5ccbe59ce61435

「jQueryで1文字ずつタイプ表示するテスト (4) お名前を入力編」
http://qiita.com/R2Y_mn/items/287c83f9da1c093395e0

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
yamatech

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?