jqueryを使用して、簡単にオンマウス・マウスオーバーで文字にエフェクトをかける方法

最近自分の宣伝しか書いてなかったので、技術の関する事を久しぶりに書いてみました。

jqueryを使用して、簡単にオンマウス・マウスオーバーで文字にエフェクトをかける方法です。

画像等のエフェクト方法は検索すれば直ぐ出てくるのですが、文字のエフェクトについての方法が書かれたページが無かったので記事にしました。
jqueryのバージョンはjquery-1.3.1を使用しています。

(この記事を機会に徐々にプログラムの勉強＆日記を書く頻度を増やしたいという狙いもあります)

jqueryの記述

$(function(){
  $('#hoge').mouseover(function() {
     $('#hoge').animate({opacity: "0"},500,function(){
        $('#hoge').animate({opacity: "1"},500 ).html('foo');
    });
  });
  $('#hoge').mouseout(function() {
     $('#hoge').animate({opacity: "0"},500,function(){
        $('#hoge').animate({opacity: "1"},500 ).html('hoge');
    });
  });
})

htmlの記述

<a href="./jquery_effect_sample.html" id="hoge">hoge</a>

http://camelmasa.com/jquery_effect_sample.html

上記のサンプルではaタグを使用していますが、その他タグでも使用可能です。

[PR]Spreeの情報を集めています。

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。
このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。
http://spreecommerce.jp/