マウスオーバーをかっこよく見せるJavaScript「Animated Hover」

マウスオーバーを印象的にするとリンクが注目されクリックされやすくなるかもしれません。
jQueryプラグインのAnimated Hoverでは、マウスオーバーのタイミングでアニメーションを加えてくれます。

sponsors

使用方法

Animated Hoverからjquery.ahover.jsをDimensionsからjquery.dimensions.jsをダウンロードします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="jquery.dimensions.min.js"></script>
<script type="text/javascript" src="jquery.ahover.js"></script>
<script language="javascript" type="text/javascript">
$(function() {
    $('ul li').ahover();
});
</script>
上記ではメニューを想定し、ulのli要素に対してマウスオーバーを適用しています。
さらにCSSを記述します。

<style>
ul {list-style-type: none;position: relative;}
ul li {position: relative;z-index: 200;padding: 0 0.5em;line-height: 1.5;float: left;}
ul div.ahover {background: #ffb;padding-bottom: 10px;position:absolute;} /* ここの背景で色を変更可能です */
</style>
あとは普段通りメニューを記述すれば完成です。

<ul>
    <li><a href="http://www.skuare.net/">Top page</a></li>
    <li><a href="http://www.skuare.net/test/index.html">JavaScript Library Samples</a></li>
    <li><a href="http://www.skuare.net/test/jQuery.html">jQuery Plugin Samples</a></li>
</ul>

※IEでは、DOCTYPEをstrictにしないと機能しないようです。
Commented by 10th543

サンプル


Javascriptサンプルページ一覧
skuare.net

sponsors