時間差で表示する文字列(2)

以前に時間差で表示する文字列を記述しました。
なぜなのかは不明ですが、最近意外と閲覧数が伸びています。
せっかくなので jQuery で書き直してみようと思います。

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

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $('#disp_area div').hide();
                $('#obj01').delay(1000).fadeIn().delay(1500).fadeOut();
                $('#obj02').delay(2000).fadeIn().delay(1500).fadeOut();
                $('#obj03').delay(3000).fadeIn().delay(1500).fadeOut();
                $('#obj04').delay(4000).fadeIn().delay(1500).fadeOut();

            });

        --></script>

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

            div {
                margin      : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="disp_area">

            <div id="obj01">
                <p>Massage Line 01</p>
            </div>
            <div id="obj02">
                <p>Massage Line 02</p>
            </div>
            <div id="obj03">
                <p>Massage Line 03</p>
            </div>
            <div id="obj04">
                <p>Massage Line 04</p>
            </div>

        </div>

    </body>
</html>

sample

spmple では時間がを置いて四行の文字列が表示されるます。
内容的には前回と同じです。
それは余りにも手抜きなので、数秒後に文字列の非表示も行っています。

意外と閲覧数が多いのが分かったために書き直しを行いましたが、
ちょっと気分がすっきりしました。
今後も jQuery 以外のものに関しては書き直さないといけないなぁ・・・

jQuery はここからダウンロードしてください。

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

コメントを残す

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