쌍용교육 -jquery수업 42일차 jQueryEffect

구 승 2024. 4. 17. 12:19

s01_show.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	//태그 노출 이벤트 연결
	$('#btn1').on('click',function(){
		//속도값 : fast(200),normel(400),slow(600)-밀리세컨드 지정 가능
		//태그 노출		//  속도값, 태그의 노출이 완료된 후 호출되는 함수
		$('#dog').show('slow',function(){
			alert('노출완료!!');
		});
	});
	//태그 숨기기 이벤트 연결
	$('#btn2').on('click',function(){
		$('#dog').hide(1000,function(){
			alert('숨김완료!!');
		});
	});
	//태그 노출, 숨김 이벤트 연결
	$('#btn3').on('click',function(){
		//선택한 요소가 보이면 숨기고, 숨겨져 있으면 나타나도록 처리
		$('#dog').toggle('slow');
	});
});
</script>
</head>
<body>
	<button id="btn1">Show</button>
	<button id="btn2">Hide</button>
	<button id="btn3">Toggle</button>
	<br>
	<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none;">
</body>
</html>

s02_fadeIn.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>효과</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	$('#btn1').on('click',function(){
		$('#dog').fadeIn('slow');
		});
	$('#btn2').on('click',function(){
		$('#dog').fadeOut(1000);//slow대신 사용가능
	});
	$('#btn3').on('click',function(){
		$('#dog').fadeToggle('fast');
		});
});
</script>
</head>
<body>
	<button id="btn1">fadeIn</button>
	<button id="btn2">fadeOut</button>
	<button id="btn3">fadeToggle</button>
	<div>
		<img id="dog" src="../files/dog.png" width="120" height="100" style="display:none;">
	</div>
</body>
</html>

s03_fadeTo.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fadeTO</title>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
	
</script>
<script type="text/javascript">
	$(function() {
		$('#btn1').on('click', function() {
							//속도값,투명도
			$('#dog').fadeTo('slow', 0.3);
		});
		$('#btn2').on('click', function() {
							//속도값,투명도
			$('#dog').fadeTo('slow', 1);
		});
		$('#btn3').on('click', function() {
							//속도값,투명도
			$('#dog').fadeTo('slow', 0);
		});
	});
</script>
</head>
<body>
	<button id="btn1">투명도(0.3)</button>
	<button id="btn2">투명도(1)</button>
	<button id="btn3">투명도(0)</button>
	<div>
		<img id="dog" src="../files/dog.png" width="120" height="100">
	</div>
</body>
</html>

s04_slideUp.htmls

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>slideUp/slideDown/slideToggle</title>
<style type="text/css">
	h1{
	width:300px;
	height:200px;
	background-color:#FF0;
	}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	$('#btn1').on('click',function(){
		//위로 올라가면서 숨겨짐
		$('h1').slideUp(1000);
	});
	$('#btn2').on('click',function(){
		//아래로 내려가면 보여짐
		$('h1').slideDown(1000);
	});
	$('#btn3').on('click',function(){
		
		$('h1').slideToggle(1000);
	});
});
</script>
</head>
<body>
<button id="btn1">slideUp</button>
	<button id="btn2">slideDown</button>
	<button id="btn3">slideToggle</button>
	<h1>내용</h1>
	<br>
</body>
</html>

05_animate.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>애니매이션</title>
<style type="text/css">
	h1{width:50px;height:30px;background-color:red;font-size:100%;}
	h2{width:50px;height:30px;background-color:orange;font-size:100%;}
	h3{width:50px;height:30px;background-color:aqua;font-size:100%;}
</style>
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>
<script type="text/javascript">
$(function(){
	//animate({애니메이션 속성},'효과속도',콜백함수)
	//애니메이션 속성: 모션으로 적용할 속성을 스타일(CSS)을 이용해 입력
	$('h1').animate({
		marginLeft:'250px'
	},5000,function(){//애니메이션 종료시 수행할 작업
		alert('도착 완료!');
	});
	
	$('h2').animate({
		marginLeft:'250px',
		opacity:0.3,
		width:'100px',
		height:'100px'
	},5000);
	
	$('h3').animate({
		marginLeft:'250px'
	},3000).animate({
		marginLeft:'100px'
	},2000);
	
});
</script>
</head>
<body>
	<h1>내용</h1>
	<h2>내용</h2>
	<h3>내용</h3>
</body>
</html>