jQueryのanimateを使って、簡単な画像拡大の動きの検証をしてみます。

3つの動作

animateを指定する際に、stop()を指定することで、動きを制御出来ます。

.animateのみ

stop()を記述しない場合は命令の実行の回数分、動作します。
例えば、連続してマウスオーバーすると回数分命令が実行されます。

stop().animate

stop()を記述すると、命令が実行中に他の行動に移った場合、すぐに動作が止まります。

stop(true , true).animate

stop(true , true)を記述すると、命令が実行中に他の行動に移った場合、実行中の命令の途中段階を切り上げ、命令の最後の動作をします。

サンプル

サンプルはこちら

一応Javascriptソース

$(function(){

	var everM = $(".everMove li");
	var stopM = $(".stopMove li");
	var endM = $(".endMove li");

	var listImg = $("ul li img");
	var imgWidth = listImg.width();
	var imgHeight = listImg.height();
	
	//img要素の幅・高さをcssで半分に指定
	listImg.css({
		width : imgWidth/2,
		height : imgHeight/2
	});
	
	//クラスeverMoveのli要素にhoverした時の動作を指定
	everM.hover(function(){
		$("img" , this).animate({
			width : imgWidth,
			height : imgHeight
		}, 500 );
	},
	function(){
		$("img" , this).animate({
			width : imgWidth/2,
			height : imgHeight/2
		}, 500 );
	});		

	//クラスstopMoveのli要素にhoverした時の動作を指定
	stopM.hover(function(){
		$("img" , this).stop().animate({
			width : imgWidth,
			height : imgHeight
		}, 500 );
	},
	function(){
		$("img" , this).stop().animate({
			width : imgWidth/2,
			height : imgHeight/2
		}, 500 );
	});		

	//クラスendMoveのli要素にhoverした時の動作を指定
	endM.hover(function(){
		$("img" , this).stop(true , true).animate({
			width : imgWidth,
			height : imgHeight
		}, 500 );
	},
	function(){
		$("img" , this).stop(true , true).animate({
			width : imgWidth/2,
			height : imgHeight/2
		}, 500 );
	});		

});

1. Web-Parkのホーム > 
2. Javascript > 
3. jQueryのanimateの動きを検証