2026년 8월 20일 (목) 15:13에 신사님의 편집

2026-08-20T15:13:38Z

2026년 8월 20일 (목) 15:12에 신사님의 편집

2026-08-20T15:12:39Z

2026년 8월 20일 (목) 15:10에 신사님의 편집

2026-08-20T15:10:46Z

← 이전 판		2026년 8월 20일 (목) 15:10 판
151번째 줄:		151번째 줄:
	.stop(true, false)		.stop(true, false)
	.hide()		.hide()
	.slideDown(~~250~~, function () {		.slideDown(180, function () {

	/*		/*
180번째 줄:		180번째 줄:
	$animTarget		$animTarget
	.stop(true, false)		.stop(true, false)
	.slideUp(~~250~~, function () {		.slideUp(180, function () {

	/*		/*

2026년 8월 20일 (목) 15:09에 신사님의 편집

2026-08-20T15:09:18Z

← 이전 판		2026년 8월 20일 (목) 15:09 판
278번째 줄:		278번째 줄:
	* =========================================================		* =========================================================
	* 위쪽 버튼 클릭 → 펼치기		* 위쪽 버튼 클릭 → 펼치기
			* =========================================================
			*
			* 중요:
			* topWrapper와 panel을 동시에 애니메이션하지 않는다.
			*
			* 1. 위쪽 버튼 wrapper를 완전히 접은 뒤
			* 2. 실제 패널을 펼친다.
			*
			* 이렇게 해야 다음 버튼과 겹치지 않는다.
	* =========================================================		* =========================================================
	*/		*/
307번째 줄:		316번째 줄:

	/*		/*
	* 상단 버튼을 ~~즉시 hide()하지 않고~~		* 위쪽 원래 버튼을 먼저 완전히 접음
	* 짧게 slideUp하여 "툭" 끊기는 느낌 완화
	*/		*/
	$topWrapper		$topWrapper
	.stop(true, ~~false~~)		.stop(true, true)
	.slideUp(140, function () {		.slideUp(140, function () {

			/*
			* jQuery 애니메이션 inline style 정리
			*/
	$(this).css({		$(this).css({
			display: 'none',
	height: '',		height: '',
	overflow: '',		overflow: '',
322번째 줄:		334번째 줄:
	marginBottom: ''		marginBottom: ''
	});		});
	~~});~~


	/*		/*
	* 실제 ~~패널은 원래 위치에서 부드럽게~~ 펼침		* 위쪽 버튼이 완전히 사라진 뒤
	*/		* 실제 패널을 펼침
	$panel		*/
	.stop(true, ~~false~~)		$panel
	.hide()		.stop(true, true)
	.slideDown(260, function () {		.hide()
			.slideDown(260, function () {

	$(this).css({		$(this).css({
	height: '',		height: '',
	overflow: '',		overflow: '',
	paddingTop: '',		paddingTop: '',
	paddingBottom: '',		paddingBottom: '',
	marginTop: '',		marginTop: '',
	marginBottom: ''		marginBottom: ''
	});		});
			});
	});		});

355번째 줄:		368번째 줄:
	* =========================================================		* =========================================================
	* 패널 안쪽 버튼 클릭 → 접기		* 패널 안쪽 버튼 클릭 → 접기
			* =========================================================
			*
			* 1. 실제 패널을 완전히 접은 뒤
			* 2. 위쪽 원래 버튼을 복귀시킨다.
			*
			* 닫을 때도 두 영역을 동시에 움직이지 않는다.
	* =========================================================		* =========================================================
	*/		*/
377번째 줄:		396번째 줄:

	/*		/*
	* 실제 패널 접기		* 실제 패널 먼저 접기
	*/		*/
	$panel		$panel
	.stop(true, ~~false~~)		.stop(true, true)
	.slideUp(260, function () {		.slideUp(260, function () {

394번째 줄:		413번째 줄:
	marginBottom: ''		marginBottom: ''
	});		});
	~~});~~


	/*		/*
	* 위쪽 원래 ~~버튼은 동시에~~ 복귀		* 패널이 완전히 닫힌 뒤
	*/		* 위쪽 원래 버튼 복귀
	$topWrapper		*/
	.stop(true, ~~false~~)		$topWrapper
	.slideDown(140, function () {		.stop(true, true)
			.hide()
			.slideDown(140, function () {

	$(this).css({		$(this).css({
	height: '',		height: '',
	overflow: '',		overflow: '',
	paddingTop: '',		paddingTop: '',
	paddingBottom: '',		paddingBottom: '',
	marginTop: '',		marginTop: '',
	marginBottom: ''		marginBottom: ''
	});		});
			});
	});		});