今回は、web初心者向けにボタンをマウスオーバーするとボタンがフェードイン・フェードアウトするjQueryを実装します。いろんな場面で使えます。
こちらもどうぞ！ フェードイン・フェードアウトしないバージョンです。
Web初心者がjQuery 画像のマウスオーバーを実装する方法(サンプル付き)
Web初心者がjQuery 画像のマウスオーバーを実装する方法(サンプル付き)
ページコンテンツ
jQueryを動かすために STEP1
head内にいつもおなじみののコードを書いてください。
|
1 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> |
実際に動く記述を書きます STEP2
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(function() { $('#nav li') .each(function(i){ //マウスオーバーしたときの画像 $(this).css('background', 'url(images/010/nav0'+(i+1)+'_on.jpg) no-repeat'); }) .find('img').hover( function(){ $(this).stop().animate({'opacity' : '0'}, 500); }, function(){ $(this).stop().animate({'opacity' : '1'}, 1000); } ); } ); |
マウスオーバー時の画像を設定します。
「images/010/nav0'+(i+1)+'_on.jpg」の「i」は、ボタンが増えたときにも対応ができるように設定しました。
「$(this).stop().animate({'opacity' : '0'}」「$(this).stop().animate({'opacity' : '1'}」で画像を透過させています。「animate」がついているのでマウスオーバーしたときにすぐに変わりません。
HTMLを設置します STEP3
|
1 2 3 4 5 6 7 |
<ul id="nav"> <li><a href="#"><img src="images/010/nav01_off.jpg" width="115" height="40" /></a></li> <li><a href="#"><img src="images/010/nav02_off.jpg" width="121" height="40" /></a></li> <li><a href="#"><img src="images/010/nav03_off.jpg" width="130" height="40" /></a></li> <li><a href="#"><img src="images/010/nav04_off.jpg" width="120" height="40" /></a></li> <li><a href="#"><img src="images/010/nav05_off.jpg" width="162" height="40" /></a></li> </ul> |
今回、横並びのボタンにしたが、ボタン一つでもOKです。
CSSを記述します STEP4
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<style type="text/css"> body,ul,li{ margin: 0; padding: 0; } li{ list-style-type: none; } li{ float: left; } img{ border:none; } div{ margin: 20px; } </style> |
横並びの画像なので、CSSをつけました。
まとめ
[サンプル] jQuery マウスオーバー フェードイン・フェードアウトボタンを実装する
サンプルのソースをコピーしても画像が絶対パスではないのでご自身の環境で画像を用意して画像を差し替えるだけで動きます。
※firefox、クローム、IEで動いていることを確認しております。
