JQueryの覚え書き/ロールオーバーで要素をフェードさせてみる

ボタン画像なんかでよく使われるロールオーバーでのスワップイメージ。その初歩として単純にロールオーバーした要素をアニメーションでフェードさせてみた。

ロールオーバーはhover()を使用して、ついでにちょっとフェードさせてみるためanimate()も使用。

1.ロールオーバーで要素をフェードさせてみる

単純に要素に対してカーソルをロールオーバーしたときに透明度を50%にします。

【参考イメージ】

rollover_1

サンプル1

2.ロールオーバーした要素以外をフェードさせてみる

今度は逆にロールオーバーした要素以外の要素を透明度50%にしてみた。

処理としては、要素全てにid属性を持たせ、繰り返し処理でロールオーバーした要素かそうでないかを判別して、ロールオーバーした要素以外をフェードアウトさせていく。

【参考イメージ】

rollover_2

サンプル2

3.ロールオーバーした要素以外をフェードさせてみる
<簡易版>

ロールオーバーした要素以外の要素を透明度50%する場合の簡易版。

処理としては、一旦全部の要素をフェードアウトして、ロールオーバーしている要素だけ元に戻す。ただそれだけ。

サンプル3

4.ロールオーバーした要素と同じ行と列をフェードさせてみる。

おまけ。ロールオーバーさせた際に同じ行と列をそれぞれ透明度50%にしてみた。

【参考イメージ】

rollover_3


サンプル4

トラックバックURL

URL: http://blog.aru8tk.net/2013/06/p-623.html/trackback

コメント(0)

コメントを残す

メールアドレスが公開されることはありません。

CALENDAR
2013年6月
« 3月   7月 »
 1
2345678
9101112131415
16171819202122
23242526272829
30  
ARCHIVE
サイト内検索

since july 24, 2010