jqueryhover01

備忘録として記載します。
なにぶん忘れっぽいので。。
上のスクリーンショットの画像の通りブログのタイトル画像(PC閲覧)が現状そうなんですが、タイトル画像にカーソルを合わせると「fujian」の部分だけじわっと色が変わります。
カーソルを離すとじわっと色が戻る。


単純なフローから。

1:jQuery導入

2:通常(カーソル合わせない)時の画像と、
  ホバー(カーソル合わせる)時の画像を二つ用意

3:htmlのimgタグにて通常時の画像を張りつけ

4:cssにて、imgを囲っているタグ(divが多いかな?)部分に、
  background-imageでホバー時画像を指定

5:スクリプトでimgタグ部分のopacity(透明度)を変化させるようにする

以上。



以下詳細。


1:jQuery導入

色々な導入方法があるかと思いますのでその辺は各々。

基本としては本家jQueryからダウンロードして頂きhead内にリンクします。
ここみたいにブログの場合はダウンロードしたファイルを、ブログのファイルアップロード的な物でアップしそのurlをリンクする。
head記載文はこんな感じ。
<script type="text/javascript" src="http://blog.livedoor.jp/trinity2011/jquery-1.11.1.min.js"></script>



2:通常(カーソル合わせない)時の画像と、
  ホバー(カーソル合わせる)時の画像を二つ用意

これは各々用意してください。
自分はこんな感じです。
 
分かりやすいように黒くしました。



3:htmlのimgタグにて通常時の画像を張りつけ

これもそのまんま。
<div id=hover_sample><img src="http://blog.livedoor.jp/trinity2011/fujian_black_off.png" width="300" height="100" alt="藤庵" /><div>
説明という事でdivに「hover_sample」ってidつけてます。



4:cssにて、そのdiv部分にbackground-imageでホバー時画像を指定

てことでCSS部分に以下記載
#hover_sample {
background-image: url(http://blog.livedoor.jp/trinity2011/fujian_black_on.png);
background-repeat: no-repeat;
width:300px;
height:100px;
  }

これでdiv部分にホバーしたときにでる画像が背景に設定されました。
(imgタグ部分じゃないって事が必要)。
※注意※
imgタグにid付けてそれに背景設定すると、この後のopacity変化でこの背景ごと透明になってただ消えるって事になるので注意。



5:スクリプトでimgタグ部分のopacity(透明度)を変化させるようにする

head部でもbody部でもいいので、animationのscriptを書き込む。
<script type="text/javascript">
$(document).ready(function(){
$('#hover_sample img').hover(function() {
$(this).stop().animate({'opacity':'0'}, 200);
},function() {
$(this).stop().animate({'opacity':'1'}, 200);
});
});
</script>

こんな感じです。

opacityの後の0と1は透明度です。(0から1まで0.1区切りで設定出来ます)
その後の200は時間です。(○/1000秒で設定なので200だと0.2秒です)
なのでこの場合はid=hover_sampleのimgに、
カーソルをホバーさせると0.2秒かけて透明度が0に変化する、
カーソルを画像から離すと0.2秒かけて透明度が1に変化する。




これがうまくいけば以下の画像のようになるはず。

藤庵






書いてて思ったけど、
変化させたいのが文字だけだったら、background-imageで背景張りした画像に普通にテキストで書き込んでその文字だけ変化させてもいいかも。
背景張りする画像を色々使い回すような感じならこっちの方が多分楽だなぁ。
※スポンサードリンク※