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

電脳の森に迷い込んだWebクリエイターのPCドタバタハナモゲラ日記です。

←idとかclass、君たちの名前は？ |　　ファイルの保存場所のカスタマイズ→　

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


author : Gaku

| Category: Web関連::Javascript | Written at 07:35 AM | comments (0) | trackback (1) |

コメント

コメントする

 
 

この記事のトラックバックURL

トラックバック

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

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

| [jp.seo] SEO研究室 SEOとウェブデザインの研究ブログ。 | 2009/01/24 11:49 AM |

←idとかclass、君たちの名前は？ |　　ファイルの保存場所のカスタマイズ→　

ページの先頭へ↑

My Profile

近影

Editor : Gaku

日々、PCの前に座り仕事しながら、あーだこーだと翻弄されるWebクリエイターです。ちょっとギターを弾いたりもします。なんやかんやいうてもPC大好きです。

New Entries

Access Ranking

  1. JQuery : マウスオーバーでフェード効果
  2. UstreamでDVカメラを使う（Windows編）
  3. DExposE2のFキー設定を変えるには
  4. LG電子製のDVDドライブの読み込み速度制限を解除
  5. VirtuaWinで仮想デスクトップ
  6. Dreamweaverで半角・全角変換コマンド
  7. リストを縦に並べると隙間が空く場合の対処方法
  8. Firefoxの右クリックメニューにwikipedia検索を追加する。
  9. LAN内でSkype
  10. Gavotte Ramdiskを試してみました

Recent Comments

Recent Trackbacks

Categories

Archieves

Links

RSS Feeds

Widgets

fxwill.com
Powered by ことわざ辞典

Twitter

    Contact to me

    お問い合せはこちらから

    お問い合せはこちらから