【jQuery】拡大・縮小のアニメーションをする例

Tweet

Category JavaScript / Tagged jQuery 2013/03/15

問題

jQueryプラグインとか無しで、拡大・縮小できる？

答え

拡大・縮小します。jQueryプラグイン無しで、拡大・縮小します！

jQueryのanimateは、数値で設定できるスタイルシートのプロパティでしかアニメーションできない。

それならば、ほぼ表示に影響しないプロパティを利用して、値の変化を発生させ、stepオプションでそれを横から利用して拡大・縮小などのプロパティの指定に使ってはどうかというアイデアで作ってみました。

前回、回転でz-indexを使いました。違う例をやってみたいので、今回は、拡大・縮小時ならほぼ気づかれない、paddding-rightを利用してみます（もちろんz-indexでもよいです）。

//ここでは表示上ほぼ気づかれないpadding-rightをアニメーションさせます
$('#sample20130315').animate({paddingRight:1},{
	//1秒かけてアニメーション
	duration:1000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//nowに現在のpadding-rightの値が渡してもらえる
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + now  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315').css('paddingRight', 0);
	}
})

ちょっと拡大・縮小してみたいだけのときに使えると思います。

おまけ

scaleで、0から1.0に向かって変化する値をそのまま利用すると、単純に小さいのが大きくなるだけですが、

0から1.0に向かって変化する値を、何らかの加工をしてから使えば、もっと楽しい拡大・縮小が可能です。

$('#sample20130315a').animate({paddingRight:1},{
	//2秒かけてアニメーション
	duration:2000,
	//stepは、アニメーションが進むたびに呼ばれる
	step:function(now){
		//0から1に向かって変化していくnowを利用してscaleさせてみる
		$(this).css({transform:'scale(' + (1 + Math.sin(now * 4 * Math.PI) / 2)  + ')'});
	},
	//終わったら
	complete:function(){
		//次のために、元に戻しておく
		$('#sample20130315a').css('paddingRight', 0);
	}
})

ちなみに、1 + Math.sin(now * 4 * Math.PI) / 2 とは、以下のような変化です。

1（原寸大）を中心に、増減（拡大、縮小）する変化です。