jQuery の animate で、透明⇔不透明のアニメーション動作

透明から不透明、もしくは、不透明から透明のアニメーション動作は、jQuery の animate の 1つ目の引数内で、opacity に toggle、show、hide、0~1 の数字(0.5など)を指定することで可能。

指定方法

animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の opacity: *** に指定する。

toggle

toggle を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、透明になり、最終的には見えなくなる。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、不透明になり、出現。

animate( { opacity: 'toggle',}, { duration: 2000, easing: 'swing', } )

show

show を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、不透明になり、出現。
出現させるブロックを、CSS で、非表示(display: none;)にしておき、jQuery の animate でそれを出現させる。

animate( { opacity: 'show',}, { duration: 2000, easing: 'swing', } )

hide

hide を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分が、透明になり、最終的には見えなくなる。

animate( { opacity: 'hide',}, { duration: 2000, easing: 'swing', } )

0.5

0.5 を指定。
赤いブロック部分を、クリックすると、グレーのブロック部分を、50%透明にする。

animate( { opacity: '0.5',}, { duration: 2000, easing: 'swing', } )

スポンサード リンク

カテゴリー: animate, API, JavaScript, jQuery, アニメーション パーマリンク