<UR-Type> fade in, out 처리하기

사이드 프로젝트를 기획할 때 데이터 다음으로 중요하게 생각했던 부분이 fade in, fade out 이었다.
최근 유행했던 꽃으로 보는 mbti, 동물로 보는 mbti 처럼 설문조사가 필요했기 때문이다.
프론트 부분 경험이 적어서 어떻게 구현할까 고민도 해보고 다른 사이트 코드도 봤었는데 감이 잘 안왔다.
그러던 중 내가 원하는 것과 가장 비슷했던 사이트를 인용하기로 했다.
Jquery의 animate를 이용한 방법이었는데, 코드는 아래 써뒀다.
코드를 최대한 깔끔하게 구현하고 싶었는데 그러지 못한 점이 아쉬웠다.
함수 안에 계속 함수가 들어가 있는 모양이라..

$(document).ready(function(){
		$('.container').children('.header').animate({opacity: "1"}, 1000, function(){
			$('.container').children('#userInfo').animate({opacity: "1"}, 1000, function(){
				$('.container').children('.glow-on-hover').animate({opacity: "1"}, 1000)
			})
	 	})
	});

이런식으로 길게 나열되는 결과가..ㅜㅜ
아마 이번 프로젝트 중 두고두고 아쉬운 부분이 될 것 같다.
모든 페이지에 fade in, fade out이 들어가는 상황인데 이게 최선인가...😱😭😫

이 다음 페이지에서 설문 조사가 시작되는데, 설문 조사의 경우 다른 방식으로 fade in, fade out을 구현했다.
opacity를 웹사이트에서 보이지는 않지만 공간을 차지하고 있는 문제가 생겼다.
새로문 질문이 나오면 이전 질문이 사라지고 공간을 차지하면 안되는데 공간을 차지하는게 문제 !
그래서 기존에 자판기 만들기 때 사용했던 css의 display를 사용하기로했다.
함수 하나로 전체 버튼을 사용하고 싶었다. 옛날에 자판기 할 때도 못했어서 이번에 고민을 많이 해봤다.
질문의 id를 list로 만들어서 서버와 주고받을까? 했는데 이 방법이 메모리도 더 많이 먹고 속도도 느릴 것 같아서 그냥 버튼마다 함수를 만들어주기로 했다.

나름 만족스럽게 유저 설문조사 파트까지 완성했고 이제 데이터 모으는게 끝나면 결과창만 만들면 클라이언트 부분은 완성이다.

피드백 받을 수 있는 부분이랑 결과 공유할 수 있게 하는 기능도 차차 넣을 예정이다!