Memorandum
BookJavaScript / jQueryrollover-action

アニメーションはシンプルに「ビヨーン」ってでてきます。
まあ、上下左右のバリエーションを作ってみたのですが、右からってどうなんですかね。。。。

あと、今回は今までのjQueryの書き方とは別の書き方で書いてみました。

jQuery

$(document).ready(function(){
		
	var SELECTOR = '.menuSampleAct';
	var $navi = $(SELECTOR)

	// 各項目のマウスオーバーを設定
	$navi.find('.roAct li').toArray().forEach(initRollOverAction);
	return;
		
	// マウスオーバー
	function initRollOverAction(li,index) {
	    
	    var $original = $(li);
	    
	    //開いているページ対応のメニュー（クラスに_nowのあるもの）には設定しないので、離脱。
	    if($original.attr('class').indexOf('_now') !== -1){
	    	return;
	    	}
	    
	    //アクションタイプてか、方向別のいろいろ設定。デフォルトの値とかね。
	    var $parent = $original.parent();
	    var $ActType;
	    var $innerPropArray = {
	    	position: 'absolute',bottom: 0,left: 0,width: '100%',height: 0,overflow: 'hidden'
	    	};
	    var $clonePropArray = {
	    	position: 'absolute',bottom: 0,width: '100%'
	    	};
	    var $animeVector1 = {
	    	height: $original.height()
	    	};
	    var $animeVector0 = {
	    	height: 0
	    	};
	    var $clonePL = $original.find('a').css("padding-left"); //横方向時に幅指定がいるので、padding値を取得しておく。
	    var $clonePR = $original.find('a').css("padding-right");
	    var $clonePL = parseInt($clonePL.slice(0,-2)); //文字列で抜きだしなので、数値に変換。別の方法あると思うが。。とりあえず。
	    var $clonePR = parseInt($clonePR.slice(0,-2));
	    
	    //タイプ判別してプロパティ設定。	
	    if($parent.hasClass('ActT')){
	    	$ActType = "T";
	    	delete $innerPropArray.bottom; //配列から削除
	    	$innerPropArray.top = 0; //配列に追加。
	    	delete $clonePropArray.bottom;
	    	$clonePropArray.top = 0;
	    	}
	    else if($parent.hasClass('ActL') || $parent.hasClass('ActR')){ //横方向時は幅指定しないとチョコチョコ問題がある。
	    	$innerPropArray.width = 0;
		    $innerPropArray.height = '100%';
		    $clonePropArray.width = $original.width() - ($clonePL + $clonePR); //padding-LRを引いた幅。
	    	if($parent.hasClass('ActL')){
		    	$ActType = "L";
		    	$clonePropArray.left = 0;
		    	}
		    else if($parent.hasClass('ActR')){
		    	$ActType = "R";
		    	delete $innerPropArray.left;
		    	$innerPropArray.right = 0;
		    	$clonePropArray.right = 0;
		    	}
		    $animeVector1 = {
		    	width: $original.width()
		    	}
		    $animeVector0 = {
		    	width: 0
		    	}
	    	}
	    else{
	    	$ActType = "B";
	    	}
	    
	    $original.find('a:first').append($ActType +"/"+ parseInt($clonePL+$clonePR)); //デバッグ用出力。
	    
	    $original.css({
	    	position: 'relative'
	    	});
	    
	    var $clone = $original.find('a').clone();
	    var className = $original.attr('class') + '_over';
	    	    
	    var $over = $('<div>').css({
	    	position: 'absolute',
	    	top: 0,
	    	left: 0,
	    	width: '100%',
	    	height: '100%'
	    	}).attr('class',className);
	    	
	    var $inner = $('<div>').css($innerPropArray);
	    	
	    $clone.css($clonePropArray);
	    	
	    $inner.append($clone);
	    $over.append($inner);
	    $original.append($over);
	    
	    $over.bind('mouseenter',onMouseEnter);
	    $over.bind('mouseleave',onMouseLeave);
	    
	    function onMouseEnter(){
	    	$inner.stop().animate($animeVector1, 200,"easeOutQuart");
	    	}
	    function onMouseLeave(){
	    	$inner.stop().animate($animeVector0, 300,"easeInQuart");
	    	}
	    		    
	    }

});

要は、$clone ＜ $inner ＜ $over ＜ original　で入れ子状態にしてるのです。

Sample