要素のマウスオーバー時のhover効果をアニメーションさせるjQueryプラグイン。 リスト要素の各アイテムにマウスオーバーした時に、そのアイテムの背後にjQueryでhover用の要素を動的に生成して、アニメーション表示させています。 幅、高さ、オフセットなどオブジェクトの位置情報を取得するjQuery Dimensions Pluginを併用しています。 このプラグインを適用する要素には、CSS上のルールがあります。 マウスオーバーされたアイテムの親要素には、position:relativeあるいはposition:absoluteが指定されていること。 マウスオーバーされたアイテムには、z-indexが指定されていること。 動的に生成されたアイテムは、hoverされたアイテムのz-indexより小さいz-indexが指定されていること。 /* hoverされたアイテムの親要素 */
![アニメーション、エフェクト|jQuery plugin|Ajax|PHP & JavaScript Room](https://cdn-ak-scissors.b.st-hatena.com/image/square/4785a29b81a3301fb946a3e1fdbe16b5b9dcab5f/height=288;version=1;width=512/http%3A%2F%2Fphpjavascriptroom.com%2Fcommon%2Fimages%2Fapple-touch-icon.png)