Hatena::ブログ(Diary)

@camelmasaの開発日記 このページをアンテナに追加 RSSフィード

Githubで活動しています。

2009-06-03

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

| 16:56

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

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>

no title

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




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

ECを持ちたい方、仕事でECを使いたい方向けのコミュニティサイトです。

このサイトでは世界で最も使用されているECの1つであるSpreeについての情報を提供しています。

http://spreecommerce.jp/

FERIATHFERIATH 2009/06/15 23:29 すげー!
TOPからfooに・・・

すごいスムーズだし参考になります!!

camelmasacamelmasa 2009/06/15 23:52 FERIATHさん

コメント有難うございます!
「参考になります」って初めて言われたので大変嬉しいです!