.animate()

Definition

• .animate() 메서드는 선택한 요소에 애니메이션을 적용합니다.

Syntax

$("selector").animate();

Compatibility

							6	7	8	9	10	11
.animate()

Sample1 클릭하면 이미지가 움직이는 예제입니다.

animation

Click

<script type="text/javascript">
	$(".btn1").click(function(){
		$(".list > div")
			.animate({"left":"90%"},1000)
			.animate({"top":"70%"},1000)
			.animate({"left":"0"},1000)
			.animate({"top":"0"},1000);
	});
</script>

Sample2 클릭하면 width값이 변경되는 예제입니다.

animation

Click

<script type="text/javascript">
	$(".btn2").click(function(){
		$(".box2")
			.animate({left:"80%",width:"150"},1000)
			.animate({left:"0",width:"60"},1000);
	});
</script>

Sample3 slideToggle이 되는 애니메이션 예제입니다.

animation

Click

<script type="text/javascript">
	$(".btn3").click(function(){
		$(".box3")
			.animate({left:"90%"},1000)
			.slideUp()
			.slideDown()
			.animate({left:"0"},1000)
	});
</script>

Sample4 크기와 투명도가 변경되는 애니메이션 예제입니다.

animation

Click

<script type="text/javascript">
	$(".btn4").click(function(){
		$(".box4")
			.animate({left:"60%",width:300, height:300,opacity:0.5},1000)
			.animate({left:"0",width:70, height:70,opacity:1},1000)
	});
</script>

Sample5 크기, 투명도, 보더레디우스가 변경되는 애니메이션 예제입니다.

animation

Click

<script type="text/javascript">
	$(".btn5").click(function(){
		$(".box5")
			.animate({left:"50%",borderRadius:"0%"},1000)
			.animate({height:300,opacity:0.5},"slow")
			.animate({width:300,opacity:0.5},"normal")
			.animate({width:70,opacity:1},"fast")
			.animate({height:70,opacity:1},1000)
			.animate({left:0, borderRadius:"50%"},1000)
	});
</script>

Sample6 크기, 투명도, 보더가 변경되는 애니메이션 예제입니다.

animation

Click

<script type="text/javascript">
	$(".btn6").click(function(){
		$(".box6")
			.animate({left:"50%"},1000)
			.animate({borderWidth:100},"slow")
			.animate({borderWidth:0},"slow")
			.animate({left:0},1000)
	});
</script>

Sample7 앞뒤로 클릭하면 이동하는 애니메이션입니다.

animation

Go Back

<script type="text/javascript">
	$(".btn7-1").click(function(){
		$(".box7").animate({left:"+=100"},100)
	});
	$(".btn7-2").click(function(){
		$(".box7").animate({left:"-=100"},100)
	});
</script>

Sample8 클릭하면 무한으로 이동하는 애니메이션입니다.

animation

Click

<script type="text/javascript">
	$(".btn8").click(function(){
		loop();
	});
	function loop(){
		$(".box8").animate({left:"80%"},1000).animate({left:"0"},1000,loop)
	}
</script>

Sample9 일정한 시간마다 움직이는 애니메이션입니다.

animation

Click

<script type="text/javascript">
	$(".btn9").click(function(){
		setInterval(time, 3000);
	});
	function time(){
		$(".box9").animate({left:"+=100"},1000).animate({left:"-=90"},1000)
	}
</script>

Sample10 일정한 시간 후에 사라지는 애니메이션입니다.

animation

Click

<script type="text/javascript">
	$(".btn10").click(function(){
		$(".box10").animate({left:"90%"},1000).animate({left:"0%"},1000);
		setTimeout(out, 3000);
	});
	function out(){
		$(".box10").clearQueue().hide();
	}
</script>

Sample11 일정한 시간 차를 주는 애니메이션입니다.

animation

animation

animation

animation

Click

<script type="text/javascript">
	$(".btn11").click(function(){
		$(".box11 > div").each(function(index){
		  $(this).delay(index*500).animate({left:"80%"},1000).animate({left:"0%"},1000);
	  });
	}
</script>

Sample12 토글기능이 되는 애니메이션입니다.

animation

Click

<script type="text/javascript">
	$(".btn12").click(function(){
		$(".box12").animate({height:"toggle", opacity:"toggle"},"slow");
	});
</script>

Sample13 콜백 함수가 되는 애니메이션입니다.

animation

Click

<script type="text/javascript">
	$(".btn13").click(function(){
		$(".box13").animate({
		  left:"80%", opacity:"0.1"
		},1000,"linear",function(){
		  alert("도착");
		});
	});
</script>

Share