アニメーション 【jQuery】

アニメーションといってもCSSをアニメーション風に見えるように動かしてると考えた方がいいかも

◆show

非表示の要素をアニメーションしながら表示

※ちょっと、カッコよく表示させたいときに使う（slow）

透明→不透明・サイズ0→本来のサイズ（最終的に、「display：block；」に切り替えられる）

↓display:none;をCSSで指定したものに↓

$(function(){
$("#main_img").show("スピード");
});

※スピード…「slow」「normal」「fast」もしくはミリ秒

注：文字列の場合は「"」でかこって、数字のときは囲まない

◆hide

表示の要素をアニメーションしながら非表示

【show】↑の反対（display:none;をCSSで指定しない）

◆slideDown

ブロック要素以外なら表示（高さを元のサイズに）

↑の【show】と【hide】との違いは、
ブロック要素かそうでないかで動く。

例えば、【slideDown】で表示させたい場合は、
CSSで、display:block;以外で指定してあげると、びよ～んとでてくる。

※注：inlineで指定すると、そのままずっと何もしてない感じになるので
いったん消した（none）したものにslideDownをかけてあげると、びよ～んとでてきた風になる

◆slideUp

要素の高さを非表示（ゼロ）にする。（ブロック要素の場合）

ブロック要素の高さを「0(ゼロ)」にする。


★スライドの切り替えメニューはこちら→




▼動き方

【show】【hide】


【slideDown】【slideUp】





↓下記もCSSに、display:none;は必要

◆fadeIn

フェードインしていく（透明度0→100％）
透明度を徐々に変更していくもの

★CSSで透明度を調節するのはこちら→

◆fadeOut

フェードアウトしていく（透明度100％→0）
透明度を徐々に変更していくもの

◆fadeTo

指定した透明度に、フェードアウト/フェードインしていく（透明度0or100%→指定した透明度）
透明度を徐々に変更していくもの




★animateについてはこちら→