jQueryでメニューのロールオーバー時、アニメーションで背景変更したい
最近こういう小技に気を配ることも大事だなあと感じていたので「どれ」と腰を上げた（例によって）
できる限りシンプルでテキストも使えて背景画像も使えて…などなどワガママな期待に胸が膨らみます。
これが探してみると普通に画像をアニメーションさせるものは多いものの、背景からみは意外に少なかった。
こちらのサイトのおかげさまで無事表示できました。ありがとうございます<(_ _)>
Simple “Call To Action” Button With CSS & JQuery By Ryan Turki. Filed in Web Design
英語ですがソースで大体判断できます。ブロック要素にあらかじめ背景を仕込み、アンカータグを乗せてホバーでアンカーを透過させて背景をじわじわ見せる、というような要素のようです。
まずはお馴染みヘッダにjQueryを読み込み。Googleから読んでます。
次にダウンロードしてきたスクリプトを読み込みます。
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script> <script type='text/javascript' src='http://ak.mabuneko.com/wp-content/themes/ak1/js/script.js'></script>
script.js の中身です。シンプルですねー。
「menu-item」は親要素のクラス名で適宜変更します。
$(document).ready(function(){
$('.menu-item a').hover(function(){
$(this).stop().animate({'opacity' : '0.5'}, 500);
}, function(){$(this).stop().animate({'opacity' : '1'}, 500);});
});
シンプルにできました。
マブネコ