brenサイトのグローバルナビゲーションで使用しております、
「jquery.bren.rollover」
を公開いたします。
機能:
マウスオーバーで画像が
- フェードイン(オフでフェードアウト)
- 縦方向にスライドイン(オフでスライドアウト)
- 横方向にスライドイン(オフでスライドアウト)
- jQueryのeasingにも対応
となります。 サンプルコードは次の通りです。
HTMLサンプル:
<script type="text/javascript" src="/js/jquery-1.4.4.js"></script> <script type="text/javascript" src="/js/jquery.bren.rollover.js"></script> <script type="text/javascript"> $(function() { $('#hdr-navi a').bren_rollover({ width : false, // 横方向アニメーション無し height : true, // 縦方向アニメーション有り opacity : true, // フェードイン有り easing : 'easeOutCirc', // 最初速く、最後ゆっくり speed : 500 // アニメーション速度500msec }); }); </script>
CSSサンプル:
/* ベースのアンカー記述 */ #tnavi li.n1 a { width: 121px; height: 40px; background: url(/images/ttlbar.png) no-repeat; background-position: -6px -98px; } /* Javascript無効時用記述 */ #tnavi li.n1 a:hover.hover-css { background-position: -6px -242px; } /* ホバー用記述 */ #tnavi li.n1 a .hover-js { width: 121px; height: 40px; background: url(/images/ttlbar.png) no-repeat; background-position: -6px -242px; }
ダウンロードはこちらから
jquery.bren.rollover.js