ホバー時にふわっと透明度を変えるjQueryのコード

画像やテキストのホバー時にふわっと透明度を変えて、ロールオーバー効果を付けるjQueryのコードです。

以下のデモのようなエフェクトをかける事ができます。

See the Pen ホバー時にふわっと透明度を変えるjQueryのコード by Saomocari (@Saomocari) on CodePen.

下記のようにヘッダー内に記入します。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".hover_img").hover(
//↑.hover_imgはアニメーションを付けたい要素を指定します。
function(){
     $(this).stop(true, true).fadeTo(300,0.5);
     //↑ここでの設定はカーソルを乗せたときの動き
     //最初の指定でスピード指定、二番目の指定で透明度の指定
},
function(){
    $(this).stop(true, true).fadeTo(300,1.0);
     //↑ここでの設定はカーソルが離れたときの動き
     //最初の指定でスピード指定、二番目の指定で透明度の指定
});
});
</script>

Related Article

8 Comments & Tracbacks

  • hoto 2013-11-29 1:33 PM

    ふわっと変わってとても良いですね。

    このようなプラグインを探していたのですが、見つからずに困っていました。

    上記のソースは自分のサイトや商用のサイトにコピペして使うことは不可能でしょうか。

    Copyright©2011 memocarilog.All Right Reserved
    こちらを記載しても難しいでしょうか?

    よろしければ教えてください。

    Reply

    • saori 2013-11-29 6:21 PM

      hoto さま
      コメントありがとうございます。
      このコードは商用サイト等でコピペ・改変などご自由に使って頂いて大丈夫です。
      クレジット表記も不要です。よろしければどんどん使って下さい。

      Reply

      • hoto 2013-12-02 3:03 PM

        saori様

        お返事遅れて大変申し訳ありません。

        ふわっと画像が変わるものに関しては自由に使わせて頂いて良いのですね。
        ありがとうございます。
        大変素晴らしい出来なので、是非使わせていただきたいと思います。
        ありがとうございます。

        またsaori様のサイトの他のソースを使わせて頂けるか、迷った時はお聞きさせてもらえば良いのでしょうか?
        それともページのどこかにライセンス表記などされているのでしょうか?

        Reply

        • saori 2013-12-03 9:28 AM

          hoto さま
          こちらこそありがとうございます。私が書いたコードならばご自由に使って頂いて問題ありませんが、他の方のコードを引用したり紹介したりしている記事もある為、そのような場合は参照元をご確認下さい。

          Reply

  • hoto 2013-12-04 1:26 PM

    saori様

    お返事ありがとうございます。

    saori様が作られたソースなら、商用サイト等でコピペ・改変などご自由に使わせて頂いて、良いのですね。
    大変助かります。

    今後も大変役に立つ情報を頑張ってください。
    応援しています。

    Reply

    • saori 2013-12-05 1:36 PM

      hoto さま
      ご丁寧にありがとうございます。応援して頂けてうれしいです、今後も頑張りますね(^O^)

      Reply

  • kenta 2014-07-09 2:39 PM

    これは良記事。
    本当に助かりました!!ありがとうございます!!!

    Reply

    • saori 2014-07-10 2:10 AM

      kenta さま

      コメントありがとうございます!
      お役に立てたなら幸いです!!

      Reply

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル コンテンツ スライドショー jQueryプラグイン php 引っ越し 素材 お知らせ JavaScript Facebook CSS カテゴリー 投稿タイプ IE HTML5 Shareボタン seo レスポンシブ Photoshop タクソノミー ナビゲーション カスタムメニュー Git Macアプリ サイドバー WPセキュリティ SVG iTunes PHPリファレンス API WP使い方 query_posts データベース get_posts() 条件分岐 コメント function RSS スマートフォン Sass/Compass さくらVPS