jsCafe勉強会でjQuery animationについて発表させて頂きました。

20130626_jscafe_ol
6月23日、jsCafe勉強会にてjQuery アニメーションについて発表させて頂きました。
この勉強会は、約2週間ごとに行われ次の発表者を決めて準備するといった、ゼミのような特徴があります。
主催者の方の実演(コンソールとかconsoleとか)されながらの説明がとても面白くモチベーションが上がりますし、
発表者の方々の内容もとても勉強になりテンション上がります〜♪
(ボソ:発表の仕方、スライドの作成方法も参考にさせて貰ってます;)

私はVol.9にてjQueryのアニメーションについてまとめました。しかし、基礎知識不足でまだまだ・・・
でもまとめることって理解するために非常に有効なことだなと身に染みて感じました。
以下、スライドです。

スライド載せるだけでは物寂しいのでサンプルを載せておきます。

show

非表示になっている要素を徐々に表示する。
(=displayプロパティがnoneからblockへ変化)

hide

表示状態の要素を非表示にする。(=showの逆)

toggle

クリック毎に、表示/非表示を切り替える。

fadeIn

非表示の要素をフェードインで表示する。
(=opacityの変更)

fadeOut

表示中の要素をフェードアウトで非表示にする。
(=opacityの変更+displayプロパティ値none)

fadeTo

透明度を指定値に徐々に変更する。
(=opacityの変更)

slideDown

非表示の要素をスライドさせつつ表示する。

slideUp

表示中の要素をスライドさせつつ非表示にする。

slideToggle

スライドアップ/スライドダウンを交互に実行する。

animate

CSSを変化させて独自にアニメーションを作成する。(キューに登録)

animateメソッドのメソッドチェーン

animateメソッドのメソッドチェーン の場合、関数は前から順番に実行。
※ その他のメソッドチェーンは即時実行
同時にアニメーションさせたい場合(キューに登録しない)
queue: false・・・キューに登録されることなく即時に実行される。

not:(animated)

:not(:animated)
アニメーションが発生していない時に限定してイベントを発動

not:(animated)なし版

stop

実行中のアニメーションを止めるメソッド

説明(というかそもそもの理解)が全然足りてないですが、これからもっと勉強していきます!!