# 3.EFFECT

# 목차

1. 이펙트
- 1.1. html 작성
- 1.2. css 작성
- 1.3. 제이쿼리로 작성
- 1.4. 자바스크립트로 작성
2. 애니메이트
- 2.1. html
- 2.2. css
- 2.3. 제이쿼리
- 2.4. 자바스크립트
3. easing
- 3.1. 사용법
  - html 작성
  - css 작성
  - jq1 작성
  - jq2 작성

# 1. 이펙트

# 이펙트를 적용해보자

제이쿼리 api 문서의 이펙트 카테고리
- jQuery-effect
  
  https://api.jquery.com/category/effects/
제이쿼리UI api 문서의 이펙트 카테고리
- jQueryUI-effect
  
  https://jqueryui.com/effect/

# 1.1. html 작성

<div id="wrap">
  <h1>제이쿼리 Effect to 바닐라스크립트</h1>
  <p>제이쿼리에서는 화면전환, 슬라이드 다운과 업 효과 등<br />다양한 효과 메서드를 제공하며, 바닐라JS로 구현이 가능합니다.</p>

  <h2>show/hide 효과</h2>
  <p><button id="btn1">hide</button> <button id="btn2">show</button></p>
  <p class="box1">선택 요소를 숨기거나 노출하고 싶을 경우에 사용합니다.<br />
hide(시간)/show(시간) 시간은 fast, normal, slow 등으로 입력할 수 있으며, 1000분의 1초 단위의 숫자로 표기할 수도 있습니다.</p>

  <h2>toggle 효과</h2>
  <p><button id="btn3">toggle</button></p>
  <p class="box2">선택 요소가 숨겨져 있다면 보이게 하고,<br />보이고 있다면 숨기는 역할을 합니다.</p>

  <h2>slideDown/up 효과</h2>
  <p>
    <button id="btn4">slideUp</button>
    <button id="btn5">slideDown</button>
    <button id="btn6">slideToggle</button>
  </p>
  <p>slideUp은 선택 요소를 위로 미끄러지듯 말아 올리면서 숨깁니다.<br />반면,
slideDown은 선택 요소를 아래로 미끄러지듯 말아 내리면서 노출시킵니다.</p>

  <h2>fadeIn/fadOut</h2>
  <p>
    <button id="btn7">fadeOut</button>
    <button id="btn8">fadeIn</button>
    <button id="btn9">fadeToggle</button>
  </p>
  <p>fadeOut은 선택 요소를 천천히 사라지게 만듭니다.<br />fadeIn은 선택 요소를 천천히 나타나게 합니다.</p>

  <h2>fadeTo 효과</h2>
  <p>
    <button id="btn10">fadeTo(0.3)</button>
    <button id="btn11">fadeTo(1)</button>
  </p>
  <p id="box3">fadeTo는 선택 요소를 원하는 만큼만 <br />보이거나 숨길 수 있습니다.</p>
</div>
</body>

# 1.2. css 작성

* {
	margin: 0;
	padding: 0;
}
li {
	list-style-type: none;
}
body {
	font: 12px/1.5 '굴림', Gulim;
	margin: 10px;
}
h2 {
	margin-top: 20px;
}

.box1,
.box2,
h2 + p + p {
	overflow: hidden;
	max-height: 40px;
}

# 1.3. 제이쿼리로 작성

미리보기

../result/3-1q.html

# STEP1-show

코어로드 후 작성 숨김 / 표시 / 토글 효과

// <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script>

$(() => {
	$('#btn1').on('click', function () {
		$('.box1').hide('slow');
	});

	$('#btn2').on('click', function () {
		$('.box1').show(1000);
	});

	$('#btn3').on('click', function () {
		$('.box2').toggle(500);
	});
});

# STEP2-slide

펼침 / 접힘 / 토글

$('#btn4').on('click', function () {
	$(this).parent().next().slideUp(1000);
});

$('#btn5').on('click', function () {
	$(this).parent('p').next().slideDown('fast');
});

$('#btn6').on('click', function () {
	$(this).parent('p').next().slideToggle('fast');
});

# STEP3-fade

서서히 표시 / 서서히 숨김 / 토글 / 투명도 조정하여 표시

$('#btn7').on('click', function () {
	$(this).parent('p').next().fadeOut(1000);
});

$('#btn8').on('click', function () {
	$(this).parent('p').next().fadeIn('slow');
});

$('#btn9').on('click', function () {
	$(this).parent('p').next().fadeToggle('normal');
});

$('#btn10').on('click', function () {
	$(this).parent('P').next().fadeTo('slow', 0.3);
});

$('#btn11').on('click', function () {
	$(this).parent('p').next('#box3').fadeTo('slow', 1);
});

# 1.4. 자바스크립트로 작성

미리보기

../result/3-1s.html

# STEP1-show

head 태그사이에 스크립트 작성 숨김 / 표시 / 토글 효과

// <script src="./effect.js" defer></script>

const box1 = document.querySelector('.box1');
const box2 = document.querySelector('.box2');
document.querySelector('#btn1').addEventListener('click', function () {
	box1.style.transition = 'max-height .75s';
	box1.style.maxHeight = '0px';
});
document.querySelector('#btn2').addEventListener('click', function () {
	box1.style.transition = 'max-height 1s';
	box1.style.maxHeight = '40px';
});
document.querySelector('#btn3').addEventListener('click', function () {
	box2.style.transition = 'max-height .5s';
	if (!(getComputedStyle(box2).maxHeight === '0px')) {
		box2.style.maxHeight = '0px';
	} else {
		box2.style.maxHeight = '40px';
	}
});

# STEP2-slide

펼침 / 접힘 / 토글

document.querySelector('#btn4').addEventListener('click', function () {
	this.parentNode.nextElementSibling.style.transition = 'max-height .5s';
	this.parentNode.nextElementSibling.style.maxHeight = '0px';
});
document.querySelector('#btn5').addEventListener('click', function () {
	this.parentNode.nextElementSibling.style.transition = 'max-height .25s';
	this.parentNode.nextElementSibling.style.maxHeight = '40px';
});
document.querySelector('#btn6').addEventListener('click', function () {
	var btn6ParentNext = this.parentNode.nextElementSibling; //엄마친구
	btn6ParentNext.style.transition = 'max-height .25s';
	if (!(getComputedStyle(btn6ParentNext).maxHeight === '0px')) {
		btn6ParentNext.style.maxHeight = '0px';
	} else {
		btn6ParentNext.style.maxHeight = '40px';
	}
});

# STEP3-fade

서서히 표시 / 서서히 숨김 / 토글 / 투명도 조정하여 표시

document.querySelector('#btn7').addEventListener('click', function () {
	var btn7ParentNextStyle = this.parentNode.nextElementSibling.style;
	btn7ParentNextStyle.transition = 'opacity 1s';
	btn7ParentNextStyle.opacity = '0';
	setTimeout(function () {
		btn7ParentNextStyle.display = 'none';
	}, 1000);
});
document.querySelector('#btn8').addEventListener('click', function () {
	var btn8ParentNextStyle = this.parentNode.nextElementSibling.style;
	btn8ParentNextStyle.display = 'block';
	setTimeout(function () {
		btn8ParentNextStyle.transition = 'opacity .75s';
		btn8ParentNextStyle.opacity = '1';
	}, 1);
});
document.querySelector('#btn9').addEventListener('click', function () {
	var btn9ParentNext = this.parentNode.nextElementSibling;
	btn9ParentNext.style.transition = 'opacity .5s';
	if (!(getComputedStyle(btn9ParentNext).opacity === '0')) {
		btn9ParentNext.style.opacity = '0';
		setTimeout(function () {
			btn9ParentNext.style.display = 'none';
		}, 500);
	} else {
		btn9ParentNext.style.display = 'block';
		setTimeout(function () {
			btn9ParentNext.style.opacity = '1';
		});
	}
});
document.querySelector('#btn10').addEventListener('click', function () {
	this.parentNode.nextElementSibling.style.transition = 'opacity .75s';
	this.parentNode.nextElementSibling.style.opacity = '.3';
});
document.querySelector('#btn11').addEventListener('click', function () {
	this.parentNode.nextElementSibling.style.transition = 'opacity .75s';
	this.parentNode.nextElementSibling.style.opacity = '1';
});

# 2. 애니메이트

제이쿼리에서는 에니메이트를 구현할수 있는 메서드를 제공한다 에니메이트(animate)와 가속도(easing) 옵션을 사용해보자

제이쿼리 애니메이트

https://api.jquery.com/animate/#animate-properties-duration-easing-complete

제이쿼리 UI 이징

https://jqueryui.com/easing/

# 2.1. html

<div class="box box1">상자1</div>

# 2.2. css

.box1 {
	position: absolute;
	left: 0;
	width: 100px;
	height: 100px;
	background-color: red;
}

# 2.3. 제이쿼리

미리보기

../result/2-4q.html

$(function () {
	$('.box1').animate(
		{
			left: '500px',
			width: '200px',
			height: '200px',
			opacity: 0.5,
		},
		1000
	);
});

# 2.4. 자바스크립트

미리보기

../result/2-4s.html

# css 추가

추가
.box1 {
	transition: all 1s;
}

# js 작성

window.onload = () => {
	var box1 = document.querySelector('.box1');
	function box1Animate() {
		box1.style.left = 500 + 'px';
		box1.style.width = 200 + 'px';
		box1.style.height = 200 + 'px';
		box1.style.opacity = '0.5';
		requestAnimationFrame(box1Animate);
	}
	requestAnimationFrame(box1Animate);
};

# 3. easing

애니메이션 진행시 가속도 옵션을 지정하여 물체의 운동감을 다양하게 표현 제이쿼리UI를 추가해야 사용할수 있다.

# 3.1. 사용법

jquery 코어파일을 로드 한 다음 ui를 로드 해야 한다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>

# html 작성

<div class="main">
	<h1>Easing Example I</h1>
	<div id="animate">
		<p>Click on me!</p>
	</div>
</div>

# css 작성

#animate {
	width: 200px;
	height: 200px;
	background-color: tomato;
	padding: 20px;
}

#animate p {
	color: black;
}

미리보기

../result/easing1.html

# jq1 작성

$(function () {
	$('#animate').on('click', function () {
		$(this).animate({ width: '400px', height: '400px' }, 1000, 'easeInBounce'); // end animate
	}); // end click
});

# jq2 작성

data() 메서드를 사용한 토글애니메이션 구현

미리보기

../result/easing2.html

$('#animate').on('click', function () {
	$this = $(this);
	console.log($this.data('click') === 'even');
	if ($this.data('click') === 'even') {
		$this.data('click', 'odd');
		$this.animate({ width: '200px', height: '200px' }, 1000, 'easeInOutSine'); // end animate
	} else {
		$this.data('click', 'even');
		$this.animate({ width: '400px', height: '400px' }, 1000, 'easeInBounce'); // end animate
	}
}); // end click

[3] : false 가 반환됨. else 문이 실행. this의 data는 even 이 할당됨

jquery + javascript effect