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
実行中のアニメーションを止めるメソッド
説明(というかそもそもの理解)が全然足りてないですが、これからもっと勉強していきます!!