[jquery] animate 기능 움직이다가 멈추기 alert (복습)

개발일지/JavaScript + jquery

[jquery] animate 기능 움직이다가 멈추기 alert (복습)

연습용365 2021. 9. 14. 09:39

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <style> #div1 { background:pink; position:absolute; 
				  top:0; left:0; padding:25px; }
		/* position:absolute 절대 위치 */
  </style>
  <script>
	$(function(){
		$('#div1').animate({top: 200, left: 0 }, 1000);
		$('#div1').animate({top: 200, left: 400 }, 1000);
		$('#div1').animate({top: 0, left: 400 }, 1000);
		$('#div1').animate({top: 0, left: 0 }, 1000);
		$('#div1').animate({top: 200, left: 400 }, 1000);
	});
  </script>
 </head>
 <body>
  <div id="div1">box</div>
 </body>
</html>

	$(function(){
		var div1 = $('#div1');
		var img = $("<img src='../img/dog.jpg'>");
		div1.animate({top: 200, left: 400 }, 1000);
		div1.animate({top: 0, left: 400 }, 1000, 
		function(){alert("쉬어가세요");});
		div1.animate({top: 200, left: 0 }, 1000);
		div1.animate({top: 0, left: 0 }, 1000);
		img.appendTo(div1);
	});

변수를 만들어줘서 간단하게 불러서 쓸수도 있다.


	$(function(){
		var img = $("<img src='../img/dog.jpg'>");
		$('#div1').animate({top: 200, left: 400 }, 1000,
		function(){ $(this).animate({ top:0, left:400 },1000,
		function(){ $(this).animate({ top:200, left:0 },1000,
		function(){ $(this).animate({ top:0, left:0 },1000)}
		)})
		}
		);
		img.appendTo(div1);
	});

이렇게 하나로 줄일 수도 있다. 그런데 더 헷깔림..

본인이 편한 방법을 찾아서 사용하면 됨!

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../jquery-3.6.0.min.js"></script>
  <style> #div1 { background:pink; position:absolute; 
				  top:0; left:0; padding:25px; }
		  /* position:absolute 절대 위치 */
		  img{ width: 150px; height: 100px; }
  </style>
  <script>
	$(function(){
		var div1 = $('#div1');
		var img = $("<img src='../img/dog.jpg'>");
		div1.animate({top: 200, left: 400 }, 1000);
		div1.animate({top: 0, left: 400 }, 1000, 
		function(){alert("쉬어가세요");});
		div1.animate({top: 200, left: 0 }, 1000);
		div1.animate({top: 0, left: 0 }, 1000);
		img.appendTo(div1);
	});
  </script>
 </head>
 <body>
  <div id="div1"></div>
 </body>
</html>

중간에 쉬어가기

div1.animate({top: 0, left: 400 }, 1000, 
		function(){alert("쉬어가세요");});