햄찌개

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

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

JQUERY - 애니메이션 연습 - fade

햄찌개 2020. 10. 6. 10:34 
<!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");
	$("#imgFadeIn").click(function() {
		$("div").fadeIn(1000);
	});
	$("#imgFadeOut").click(function() {
		$("div").fadeOut(1000);
	});
	$("#imgFadeToggle").click(function() {
		$("div").fadeToggle(1000);
	});

	
});

</script>
</head>
<body>
  <p>이 영역은 버튼을 누르면 사라졌다가 다시 나타납니다.</p>
   <br>
  
   <br>
    <input type="button" id="imgFadeIn" value="fadeIn">
	<input type="button" id="imgFadeOut" value="fadeOut">
	<input type="button" id="imgFadeToggle" value="fadeToggle">

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

</body>
</html>

<!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">
	$(function() {
		$("div").css({
			"width" : 500,
			"height" : 500,
			"border" : "1px solid black"
		}).attr("align", "center");
		$("#imgFadeIn").click(function() {
			$("img").fadeIn(2000, function() {
				alert("fadeIn 작업 완료");
			});
		});
		$("#imgFadeOut").click(function() {
			$("img").fadeOut(2000, function() {
				alert("fadeOut 작업 완료");
			});
		});
		$("img").mouseover(function() {
			$(this).fadeTo(2000, 0.2);
		});
		$("img").mouseout(function() {
			$(this).fadeTo(2000, 0.2);
		});
		$("#imgFadeToggle").click(function() {
			$("img").fadeToggle(2000, function() {
				alert("fadeToggle 작업 완료");
			});
		});
	});
</script>
</head>
<body>
<input type="button" id="imgFadeIn" value="이미지 fadeIn">
<input type="button" id="imgFadeOut" value="이미지 fadeOut">
<input type="button" id="imgFadeToggle" value="이미지 fadeToggle">
<br><br>
<div><img src="../../image/ice.jpg" style="display: none;"width="500px"></div>
</body>
</html>

저작자표시

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

JQUERY - checkbox  (0) 2020.10.07
JQUERY - 애니메이션 연습 - animate  (0) 2020.10.06
JQUERY - 애니메이션 연습 - hide, show  (0) 2020.10.06
JQUERY - mouse이벤트 연습  (0) 2020.10.05
JQUERY - input type 연습  (0) 2020.09.29
'UI설계 및 구현 -웹프로그래밍' Related Articles more