jQueryのanimateの動きを検証

Javascript

2010.01.12

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の動きを検証
オススメ本(既読)
読んでみたい本(未読)

COMMENT!!

COMMENT PLEASE!!

トラックバック

「jQueryのanimateの動きを検証」のトラックバックURL
http://web-park.org/javascript/imgview100103.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook