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
4
Help us understand the problem. What is going on with this article?
@yamatech

jQueryで1文字ずつタイプ表示するテスト (3) 点滅カーソル付けた編

More than 5 years have passed since last update.

jQueryで1文字ずつタイプ表示するテスト (3) 点滅カーソル付けた編

前回の3行の文章に、点滅するカーソルみたいなアンダーバーを付ける。
最初の1文字 H_ から始まり Hello,W_ というように常に最後尾に常駐させる。

Hello, World!!
へんじがない
ただのしかばねのようだ_

ソースは前回の記事の内容の一部を変更していく。


HTMLファイルの変更点

<head>タグ内にcssファイルのリンクを張る。(CSSは後ほど設定)

<link rel="stylesheet" href="style.css">

JavaScriptから取得したテキストを表示させる<div>領域の内容を変更する。

変更前
<div id="test"></div>
変更後
<div>
     <span id="test"></span><span id="cursor">_</span>
</div>

div タグ内に span タグを二つ作って、
それぞれ、 id#test (文章を表示する領域)と id#cursor (カーソルを表示する領域)とした。
<span id="cursor"> には半角アンダーバー " _ " を入れておく。


JavaScriptファイルの変更点
$(function() {

    var txt = "Hello, World!!\nへんじがない\nただのしかばねのようだ";

    var txtArr = txt.split("");
    var count = 0;

    var txtCount = function() {
        var timer = setTimeout(txtCount, 250);
        $('#test').append(txtArr[count].replace(/\n/, "<br>"));
        count++;
        if (count == txtArr.length) {
            clearTimeout(timer);
        }
    }
    txtCount();

        ここから下を追加する
    // カーソル点滅
    setInterval(function() {
        $('#cursor').fadeIn(500).fadeOut(500);
    },1000);
});

コメント // カーソル点滅 以下を追記。
jQuery で fadeIn と fadeOut で、HTMLに記述した <span id="cursor">_ を点滅させる。
setInterval で1秒(1000)をそれぞれ半分の0.5秒(500)ずつ割り当て動作を繰り返す。


CSSの設定

これで、一応動作はするが、文字とカーソルがグネグネ波打つような気持ち悪い動きになるので、CSSを id#test と id#cursor に(あるいは<span>にまとめて)CSSを設定する。
ブロックレベル要素の<div>領域だとやはりグネグネするので、インライン要素<span>に設定する。

style.css
#test, #cursor {
    line-height: 1em;
    vertical-align: text-bottom;
}

line-height は1文字分の高さ 1em に揃えて、
vertical-align を文字列の最下部のライン text-bottom に合わせる。
特に vertical-align はカーソルを下のラインに固定するため重要。


サンプル

--> 実行サンプル


関連記事

関連記事

「jQueryで1文字ずつタイプ表示するテスト (1)」
http://qiita.com/R2Y_mn/items/3d3aa162f920bd7b70dd

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

>>「jQueryで1文字ずつタイプ表示するテスト (3) 点滅カーソル付けた編」

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

4
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
4
Help us understand the problem. What is going on with this article?