デザイナーさんの為のjQuery講座 Lv.2 [動かす編]

鳥よし

2013.09.06

Web制作

お盆休み中はリア充でした。　鳥よしです。

前回、記事を書いた際にテキストの編集じゃモチベーションが上がらん！との意見を頂いたので、今日は前回のおさらい(デザイナーさんの為のjQuery講座Lv.1)も兼ねて、色々動かしてみようと思います。

手を抜いているわけではないのです。

勉強会の内容を見直してもらえればいいのです。

1.前回の内容を駆使して、トグルしてみよう！

トグルとは、ある同じ操作を繰り返すことで、機能や状態のON/OFFを切り替える仕組みのことである。

まずは何でもいいので、HTMLを用意してみましょう。

<body>
    <input type="button" id="toggle_btn" value="トグルさせる"><br />
    <div id="text_1">
        この夏の<br />
        リア充な日々は<br />
        もう<br />
        終わって<br />
        しまったのです。
    </div>
</body>

センスの欠片もないHTMLですね。

手を抜いているわけではないのです。

意味が分かってもらえればいいのです。

何をしようかというと、id=”toggle_btn”のボタンを押したら、id=”text_1″の内容がブラインドのように隠れたり表示したりしたいのです。

これに動きをつけるには、以下のscriptを埋め込むのです。

<script>
$(function() {
    $('#toggle_btn').on('click', function() {

        // id="toggle_btn"が押されたら、id="text_1"をトグルする。
        $('#text_1').slideToggle();

    });
});
</script>

セレクタとか、クリックイベントのお話は前回も書いているので、
今回変わった部分は「.slideToggle();」の部分だけですよね。
呼んでるメソッドが前回と変わっているだけです。

つまり、そういうことです。
ルールさえわかってしまえば、難しくないのです。

画面を開いた時はテキストを表示しないで、ボタンを押したら表示したいなんて場合は、最初にid=”text_1″にdisplay:none;でも設定してしまえばいいのではないでしょうか。

<div id="text_1" style="display:none;">

こんな感じでしょうか。
※ガチでやる場合はちゃんとCSSに書きますが、手を抜いています。だって、これ書いてるのお盆休み中だもん。

ちなみに、slideToggle()は引数によって動きに変化をつけられるので、色々試してみてください。

http://api.jquery.com/slideToggle/

2.上記の応用でcompleteに動作を設定してみよう！

下のようなHTMLを用意します。

<body>
    <input type="button" id="toggle_btn" value="トグルさせる"><br />
    <div id="text_1">
        この夏の<br />
        リア充な日々は<br />
        もう<br />
        終わって<br />
        しまったのです。
    </div>
    <div id="text_2" style="display:none;">
        みなさんは<br />
        夏の思い出を<br />
        たくさん作ることが<br />
        できましたか？
    </div>
</body>

手抜きとしか言いようがないHTMLですね。

楽をしているわけではないのです。

意味が分かってもらえればいいのです。

id=”text_1″は最初に表示されていて、id=”text_2″は表示されていない状態です。
これを、id=”text_1″が閉じたらid=”text_2″を表示させてみます。

<script>
$(function() {
    $('#toggle_btn').on('click', function() {

        // id="toggle_btn"が押されたら、id="text_1"をトグルする。
        $('#text_1').slideToggle('slow', function() {
            // id="text_1"のトグルが完了したら、id="text_2"をトグルする。
            $('#text_2').slideToggle();
        });

    });
});
</script>

「$(‘#text_1’)」のslideToggleに引数が2つ設定されています。

1つ目の「’slow’」はトグルの速さを設定しています。
今回は「’slow’」と設定したのでゆっくりトグルしていますがそれ以外に「’normal’」「’fast’」や、数字で設定すれば任意の時間をかけてトグルさせることが出来ます。(数字の場合はミリ秒単位になるので、3秒で設定したい場合は3000と設定します。)

2つ目の引数が、こちらに書かれている通り、完了時の動作をさらに関数で設定しています。ちょっと書き方が難しいかもしれませんが、「function() {}」この中に書いた処理がトグル完了後に実行されるという事だけ掴んで頂ければいいと思います。

これで、id=”text_1″が隠れた後にid=”text_2″が表示され、もう一度押すと、id=”text_1″が出た後にid=”text_2″が隠れるようになると思います。

動きとしてはまだまだ中途半端ですが、徐々にいい動きをつけていけたらと思います。