jQuery 自動ドア風アニメーション

画像や文字などを隠しておいて、クリックで表示させるサンプルです。

まずは、シンプルに表示させるパターンです。

toggle

fadeToggle

slideToggle

トグルは表示、非表示。フェードは徐々に透明度で変化。スライドを上下動で現れます。

$(".demo_btn1").on("click",function(){
		$(".demo_blind").toggle();
	});
	$(".demo_btn2").on("click",function(){
		$(".demo_blind").fadeToggle();
	});
	$(".demo_btn3").on("click",function(){
		$(".demo_blind").slideToggle();
	});

次は自動ドアのようなアニメーションのサンプルです。

Door

	$(".demo_btn4").on("click",function(){
		$(".demo_door .demo_l").toggleClass('open');
		$(".demo_door .demo_r").toggleClass('open');
	});

.demo_l{
	position: absolute;
	transition: all 1500ms 0s ease;
	background: #555;
	width: 50%;
	height: 150px;
	top: 0;
	left: 0;
	background-image: url(/img/site/bg.png);
    background-repeat: repeat;
}
.demo_l.open{
	margin-left: -50%;
}
.demo_r{
	position: absolute;
	transition: all 1500ms 0s ease;
	background: #555;
	width: 50%;
	height: 150px;
	top: 0;
	left: 50%;
	background-image: url(/img/site/bg.png);
    background-repeat: repeat;
}
.demo_r.open{
	margin-left: 50%;
}

上記のようにCSSのアニメーションで実装しています。

最後に下のサンプルはjQueryのアニメーションで実装してます。

linear

easeOutQuart

easeOutBounce

linearは一定、easeOutQuartは最後がゆっくり、easeOutBounceは最後にバウンドするエフェクトがついています。

	$(".demo_btn5").on("click",function(){
		e = $(this).html();
		ml = parseInt($(".demo_door2 .demo_l2").css('margin-left'), 10);
		t = 1500;

		if(ml == 0){
			$(".demo_door2 .demo_l2").animate({"marginLeft":"-=50%"}, t, e);
			$(".demo_door2 .demo_r2").animate({"marginLeft":"+=50%"}, t, e);
		}else if(ml == -150){
			$(".demo_door2 .demo_l2").animate({"marginLeft":"0%"}, t, e);
			$(".demo_door2 .demo_r2").animate({"marginLeft":"0%"}, t, e);
		}
	});

クイズや抽選、おみくじなど、答えや結果を表示する時に使えそうです。