JS jQuery 2 (addClass,removeClass,hasClass), setTimeout

< 올바른 방법 >

HTML : 뼈대
CSS : 스타일 설정
JS : 선택, 해제 (addClass, removeClass)

addClass, removeClass

(CSS)

body.active {
	background-color: green;
}

(JS jQuery)

$('.btn-1').click(function() {
	$('body').addClass('active');
});

$('.btn-2').click(function() {
	$('body').removeClass('active');
});

HTML - btn-1,btn-2 불러오기, css의 active 효과 활성/해제
('active') O , ('.active') X 찾아올 것만 . 붙이기

hasClass

: 동작 시키는 게 아닌, 확인용 코드

$('.btn-1').click(function() {
	var has = $('body').hasClass('active');
	
	if ( has ) {
			$('body').removeClass('active');
			}
	else {
		$('body').addClass('active');
	}
});

만약 has(갖고 있다면) active 삭제,
그 외에 (else) 없다면 active 추가
변수 없이 if문에 $('body').hasClass('active') 추가하는 방법도 있음

-> 토글 클래스로 한줄 요약 가능!

$('body').toggleClass("active");

---

setTimeout

: 약간의 딜레이

setTimeout(function() {
    $('img:nth-of-type(2)').animate({'margin-left' : '0'}, 300);
  }, 300);

1초 = 1000
300 = 0.3초 뒤에 실행하겠다

=> JS에서 직접 css를 건들이지 않기. 좋은 방법은 아님
=> css에 transition 넣고 JS에는 addClass

---

box-shadow (CSS)

: 그림자 설정