透明から不透明、もしくは、不透明から透明のアニメーション動作は、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', } )