さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【jQery】透明度を調整してロールオーバーする

Pocket
LINEで送る

jQueryを使用して要素の透明度を変えることでロールオーバーさせる方法をご紹介。

透過処理の設定はCSSで「opacity」「filter」を使用すればできるのですが、なぜかサーバにアップしてIEで見ると透過処理が効かない状態に陥ってしまったので、JQueryで対応することにしました。
方法は以下の通り

(1)jquery.jsを以下からダウンロードする。
https://jquery.com/download/

(2)?内にjquery.jsをhtmlに読み込むコードを書く。

<script src="js/jquery.js"></script>

(3)同じく?内に以下のコードを記述する。

<script>// <![CDATA[
$(document).ready(function(){
   $("透過させたい要素名").each(function(){
     $(this).hover(
       function(){  
         $(this).css({"opacity":"0.7", "filter":"alpha(opacity=70)"});
       },
       function(){
         $(this).css({"opacity":"1", "filter":"alpha(opacity=100)"});
       }
     );
   })
 });
// ]]></script>

※「“opacity”:”0.7」の「0.7」の部分の数字を変えて透明度を変えます。(1が100%です。)
※「“filter”:”alpha(opacity=70)”」はIE6、IE7対応のコードです。こちらも「70」の部分の数字を変えて透明度を変えます。(こちらはそのままパーセントです。)

カテゴリー:JQuery, アニメーション

コメントを残す

コメント内容