jQueryでマウスオーバーでスライドアニメーションさせる(解説付き)

jQueryとCSSを使ってマウスオーバーでメニューが
スライドするアニメーションさせるサンプルが紹介
されていたのでメモひらめき電球

動きもクールでいい感じなので使えそうですね。
Animated Navigation with CSS & jQuery

このテクニックを使えば、サイトのナビゲーション以外にも
使えそうです！



今まではメモだけだったけど今後は、スキルアップ
のために解析していきたいと思いますニコニコ
既にコメントが入っているので分かりやすかったです。
間違っていたら教えてくださいビックリマーク

HTML
<ul id="topnav">
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
</ul>

jQuery
$(document).ready(function() {

	$("#topnav li").prepend("<span></span>"); //Throws an empty span tag right before the a tag

	$("#topnav li").each(function() { //For each list item...
		var linkText = $(this).find("a").html(); //Find the text inside of the <a> tag
		$(this).find("span").show().html(linkText); //Add the text in the <span> tag
	}); 

	$("#topnav li").hover(function() {	//On hover...
		$(this).find("span").stop().animate({
			marginTop: "-40" //Find the <span> tag and move it up 40 pixels
		}, 250);
	} , function() { //On hover out...
		$(this).find("span").stop().animate({
			marginTop: "0"  //Move the <span> back to its original state (0px)
		}, 250);
	});

});

$("#topnav li").prepend("<span></span>");の処理で span タグを追加
<ul id="topnav">
    <li><span></span><a href="#">Home</a></li>
    <li><span></span><a href="#">Services</a></li>
    <li><span></span><a href="#">Portfolio</a></li>
    <li><span></span><a href="#">Blog</a></li>
    <li><span></span><a href="#">About</a></li>
    <li><span></span><a href="#">Contact</a></li>
</ul>

$("#topnav li").each の処理で a タグを追加
<ul id="topnav">
    <li><span><a href="#">Home</a></span><a href="#">Home</a></li>
    <li><span><a href="#">Services</a></span><a href="#">Services</a></li>
    <li><span><a href="#">Portfolio</a></span><a href="#">Portfolio</a></li>
    <li><span><a href="#">Blog</a></span><a href="#">Blog</a></li>
    <li><span><a href="#">About</a></span><a href="#">About</a></li>
    <li><span><a href="#">Contact</a></span><a href="#">Contact</a></li>
</ul>

$("#topnav li").hover で
第一引数にマウスがオーバーした時の処理を書きます。
オーバーしたら一回アニメーションをストップさせて
span の位置を0.25秒かけて－40で上に移動させます。
このときに a タグの位置も上に移動するようになってます。

第二引数はマウスが外れた時の処理を書きます。
外れたら一回アニメーションをストップさせて
span の位置を0.25秒かけて0で下に移動させます。

ストップを行うのは、連続してオーバーしたり外れたりした場合
その分だけ処理を繰り返さないようにするためです。

スタイルシートのテクニックが素晴らしいので
スタイルシートと一緒に見ると勉強になります。



今回勉強した重要なAIP
jQuery日本語リファレンス
ready　ロードされて操作・解析が可能になったタイミングで関数を実行。
prepend　引数で指定したコンテンツを各要素の先頭に挿入する。
each　エレメントが見つかる度に1度ずつ、毎回関数が実行。
find　指定要素が持つ全子孫要素から、指定条件式に合致するものを選択する。
show　各要素のうち、非表示状態にあるものを表示します。
hover　マウスカーソルが要素の上に乗った時に、第一引数に渡した関数を実行します。マウスが要素から外れた時には第二引数が実行されます。
stop　指定した要素集合から、現在動作中のアニメーション処理を全て中止します。
animate　アニメーション。完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
html　最初の要素をHTML文字列で返す。
html(val)　指定した要素のHTMLに指定値をセットする。

PHPでAjaxからのアクセスか簡単に判別する方法

PHPでAjaxからのアクセスか簡単に判別する方法を紹介されて
いました。

Detect an AJAX Request in PHP


最近、Ajaxをよく使うので覚えておいたほがよさそうなのでメモひらめき電球
/* decide what the content should be up here .... */
$content = get_content(); //generic function;

/* AJAX check  */
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
	/* special ajax here */
	die($content);
}

/* not ajax, do more.... */


環境変数の HTTP_X_REQUESTED_WITH を使うと参照できるんですね。
xmlhttprequest だとAjaxからのアクセスになります。
小文字になってるけど XMLHttpRequest じゃないのかな？

AJAXによるアクセスを判定（判別・区別）する

実際に検証していないので時間あるときにやってみますあせる

ネタ元のサイト
サーバへのリクエストがAjaxからか、そうでないかを調べるPHPコード

PHPの"＝＞"と"―＞"とはどういう意味？

phpで "=>" と "->" って使うときがあるけど恥ずかしながら
よく分からずに使っていたので、ちょっと調べてみた。

分かりやすく説明されている方がいたのでメモひらめき電球
PHPの"＝＞"と"―＞"の意味

=> は配列に代入、参照
-> はオブジェクト（クラス）のメソッドやフィールド変数を参照

PHPのマニュアル

普段なにげなく使っているけど改めて調べると勉強になりますねビックリマーク