햄찌개

JQUERY - 애니메이션 연습 - animate 본문

UI설계 및 구현 -웹프로그래밍

JQUERY - 애니메이션 연습 - animate

햄찌개 2020. 10. 6. 10:36 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../../js/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("div")
		.css("border", "2px dotted red")
		.css("background","pink");
	$("#Ani").click(function() {
		$("div").animate({width:"100%",opacity:0.4});
	});
	
	$("#Ani2").click(function() {
		$("div").animate({left:'250px',height:"+=150px"});
	});
	$("#Ani3").click(function() {
		$("div").animate({width:"100%",opacity:1});
	});

	$("#Ani4").click(function() {
		$("div").animate({left:'250px',height:"-=150px"});
	});
	
});


</script>

</head>
<body>
  
   <br>
    <input type="button" id="Ani" value="1번 애니매이션">
	<input type="button" id="Ani2" value="2번 애니매이션">
	<input type="button" id="Ani3" value="3번 애니매이션">
	<input type="button" id="Ani4" value="4번 애니매이션">

   <div>
      <p>안녕하십니까.</p>
      <p>안녕히 가십시오.</p>
      
   </div>
</body>
</html>

저작자표시

'UI설계 및 구현 -웹프로그래밍' 카테고리의 다른 글

JQUERY - parent().is 예제  (0) 2020.10.08
JQUERY - checkbox  (0) 2020.10.07
JQUERY - 애니메이션 연습 - fade  (0) 2020.10.06
JQUERY - 애니메이션 연습 - hide, show  (0) 2020.10.06
JQUERY - mouse이벤트 연습  (0) 2020.10.05
'UI설계 및 구현 -웹프로그래밍' Related Articles more