第10回 hoverとEffectの応用　jQueryによるJavaScript入門

西畑一馬 — Tue, 09 Sep 2008 08:17:48 +0000

こんにちは。トゥーアールの西畑です。あまりにも忙しかったので2週間ほどお休みしましたが、jQueryによるJavaScript入門　第10回はhoverとeffectの応用を解説いたします。

hoverとeffectの利用方法は、前のエントリーを参考にしてください。

まずはサンプルをご覧ください。

リンクにマウスを乗せると説明がでてきます。

XHTMLはリンクをa要素、説明をstrong要素で記述したリストで構成しています。

<ul>
	<li><a href="http://blog.webcreativepark.net/">to-R</a>JavaScriptやSEO対策、CSS、Movable Typeなどの情報を発信li>
	<li><a href="http://css.webcreativepark.net/">CSS TIPS</a>CSSでレイアウトする為のテクニックを中心に紹介していますli>
	<li><a href="http://seo.webcreativepark.net/">SEO対策TIPS</a>SEOのTIPSやツールを公開中li>
	<li><a href="http://javascript.webcreativepark.net/">JavaScript Library Archive</a>JavaScriptライブラリをまとめたサイトになりますli>
ul>

こちらがjQueryの命令文です。

$(function(){
	$("a+strong").hide();
	$("a").hover(function(){
		$("+strong",this).show("fast");
	},function(){
		$("+strong",this).hide("fast");
	})
})

最初から解説していきます。

$("a+strong").hide();

これは最初に隣接セレクタを利用してstrong要素を非表示にしています。

hoverの最初のfunction内にマウスが乗った際の最初の命令を記述します。

$("+strong",this).show("fast");

マウスが乗った要素の次にある要素をエフェクトを付けて表示しています。

hover内のfunctionで利用するthisはclickのthisと同じように、命令が実行された要素を指定できます。

参考：第8回 click時の$関数の第2引数

同様にhoverの2個目のfunction内マウスが離れた際の命令を記述します。

$("+strong",this).hide("fast");

マウスが離れた要素の次にある要素をエフェクトを付けて非表示しています。

これでメニューのリンク先の内容の補足などを簡単に行うことができます。

【PR】書籍現場のプロから学ぶXHTML+CSS 好評発売中

Re:Creator's Kansai （リクリ） » Effect

第10回 hoverとEffectの応用 jQueryによるJavaScript入門

第10回 hoverとEffectの応用　jQueryによるJavaScript入門