JavaScript - 動的なページの作成(clipping, toggle, animate(jQuery))

初めてのJavaScript 第2版
Shelley Powers (著)
武舎 広幸、武舎 るみ (訳)

開発環境

• OS X Lion - Apple(OS)
• Safari、Firefox + Firebug (Webプラウザ、プラグイン)
• BBEdit - Bare Bones Software, Inc.(Text Editor)
• Script言語:JavaScript
• JavaScript Library: jQuery

『初めてのJavaScript 第2版』(シェリー・パワーズ著(Shelley Powers著)、武舎 広幸+武舎 るみ訳、オライリー・ジャパン、2009年、ISBN978-4-87311-425-5) の12章(動的なページの作成)練習問第12-4.を解いてみる。

その他参考書籍

• JavaScript 第6版
• JavaScriptリファレンス 第6版
• JavaScriptクックブック
• jQueryクックブック

4.

表示/非表示の切り替えるだけ

コード(BBEdit)

// show(), hidden()
$('#box1').toggle();

スライド(ゆっくり)

コード(BBEdit)

$('#box2').slideToggle('slow');

スライド(速い)

コード(BBEdit)

$('#box3').slideToggle('fast');

スライド(指定(参考までに上記のslowは600ミリ秒、fastは200ミリ秒))

コード(BBEdit)

var t = parseInt($('#speed_box4').val(), 10);
$('#box4').slideToggle(t);

フェード(animate, ゆっくり)

コード(BBEdit)

$('#box5').animate({ opacity : 'toggle' }, 'slow');

スライドとフェード(animate, ゆっくり)

コード(BBEdit)

$('#box6').animate({ opacity : 'toggle',
                     height: 'toggle'
                   }, 'slow');