brenサイトのグローバルナビゲーションで使用しております、

「jquery.bren.rollover」

を公開いたします。

機能：

マウスオーバーで画像が

• フェードイン（オフでフェードアウト）
• 縦方向にスライドイン（オフでスライドアウト）
• 横方向にスライドイン（オフでスライドアウト）
• ｊQueryの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