テキストを1文字ずつフェードイン

文字列の fadeIn はよく見かけます。
「こんなことが出来る」と聞かれましたのでやってみました。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript"><!--

            $(function(){
                $('#exec').click( function(){
                    $('#text_area').empty();
                    var arrText = $('#input_text').val().split('');
                    $.each(arrText, function(index, val){
                        $('#text_area').append('<span id="cnt' + index + '" style="opacity:0;">' + val + '</span>');
                        $('#cnt' + index).delay(index * 300).animate({opacity:1},1000);
                    });

                });
            });

        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            div {
                margin : 50px;
            }

            #text_area {
                height : 50px;
                margin : 50px;
                border : solid 1px #000000;
            }

        --></style>

    </head>
    <body>
        <div id="main_area">

            <div id="main_area">
                <p id="text_area"></p>
            </div>

            <div id="button_area">
                <input id="input_text" type="text" value="Sample Message">
                <button id="exec">click!</button>
            </div>

        </div>
    </body>
</html>

sample

sample には textbox が存在しています。
入力したうえで button を click すると入力した文字列が 一文字ずつ fadeIn します。
別に fadeIn を使っても良いんですが最終形はもう少し凝ったこともするらしいので
あえて animate を使用しています。

どうでしょう、意外といけているかと思うのですが・・・
一度これで確認してもらおうかと思います。
最終的にはもう少し装飾などを追加しますが、まずはこれで確認してもらおうと思います。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です