ハナモゲラボ / 試行錯誤の実験人生

日々、PCや各種デバイス、楽器等に翻弄されながら電脳の森をさまよう男の日常と様々な実験をさらりと記しております。

JQuery : マウスオーバーでフェード効果

November 13 2008

読み込ませておけば何かと便利なJQuery。
使い勝手が良すぎてホント重宝しております。

今回はマウスオーバーでフェード効果を使うやり方。
どっかで見て習得したものの、ひさしぶりにこれをやろうと思ったら
案の定ど忘れしてたんで覚え書きとして書いておく。

まずJQueryを読み込ませておいてから、下記のスクリプトを書く。

$(document).ready(function(){
$("img.jquery-hover").fadeTo(0,1.0);
$("img.jquery-hover").hover(function(){
$(this).fadeTo(300,0.8);
},
function(){
$(this).fadeTo(300,1.0);
});
});

適当な名前でjsファイルとして保存して、またlinkタグで読み込ませよう。

ちなみにfadeTo(speed, opacity, callback)というプロパティになってます。
speed : フェードの速度。”slow”, “normal”, “fast” の文字列か、ミリ秒を数値で指定。
opacity : 不透明度。0 ~ 1 で指定。この不透明度になるまで、フェードします。
callback : フェードが終了した後に実行されるコールバック関数。(オプション)
今回は不透明度を1~0.8まで300ミリ秒かけて操作するという設定です。

で、imgタグにclass名「jquery-hover」を足してやれば完成。
なんてお手軽。

pタグで囲んで背景色ひいてあげるとその色が透けます。
グラデーション画像ひいてもおもしろいかもです。

追記:
Wordpressで使用する場合、この書き方ではコンフリクトして動かないので
$の部分をすべてjQueryで置き換えれば動作します。
wp_enqueue_scriptで読み込ませればOKです。

| Posted in Javascript, Web関連 | Comments (1)

One Comment

  1. Posted 2009年1月24日 at 11:49 AM |

    JQueryプラグインが使えすぎて困る。~デザインより使い勝手編~

    JP.SEO本家のトップページにある記事をスライド式にしました。Jqueryを使…

Post a Comment

※メールアドレス、URLは任意入力です。メールアドレスは入力しても公開されません。

« Jul 2017 August 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31