40日目 | web制作講座
本日は…
■月一回のテスト（JavaScript）
■jQueryのアニメーション効果
・toggleとshow,hide
・ライブラリを使って画像置換とクロスフェード
■Photoshopでボタン制作
jQueryのアニメーション効果
・toggleは現在のバージョンでは動かない→制式採用されたライブラリjQueryMigrateを使用
→jsファイルを読み込んで、普通にtoggle()を記入していく
ex)toggle(function(){},function(){}) ...と入れていく
同じものをクリックする度、表示非表示を入れ替えるイメージ※2つだけじゃない
・showとhideはdisplay:noneのものを表示するので、それ以下の要素は非表示の段階では詰めて表示される（fadetoとの違い）
：.show('')…第一引数には表示のスピードを入れる
：.show('','')…第二引数にはコールバック関数を入れる
※コールバック関数は、処理が終わったら呼び出される関数のこと
ex).show('slow','(function(){ 表示後にcssのbackground色を変える関数 });')…etc...
※※showやhideは、連打されると押された回数だけ処理をしてしまう
→:not(:animated)を入れてやることで、showの途中にhide押されても処理をしなくなる
以下、ライブラリの使用
※各リンク先はライブラリ元ではなく、ライブラリを使用して実際に作ったもののページ
→何枚かの画像を、指定されたクラス名をつけるだけでクロスフェード表示にしてくれる
：より細かい指定が可能
：表示領域のサイズ指定も簡単
