jQuery - slideDown(슬라이드다운) 메서드, 실행 후 다른 코드 실행(callback)

2022. 5. 16. 10:47

▶ slideDown 메서드

💻 예제 설명

이 슬라이드 다운(slideDown) 메서드는 처음부터 display 속성이 none 상태인 요소를

아래 방향으로 서서히 나타나 지면서 보이는 행위를 하게 하는 메서드이다.

이 슬라이드 다운을 할 요소는 처음부터 css 속성인 display 속성을 none으로 설정해줘야 한다.

그래야 슬라이드 다운 되면서 맨 처음 없던 요소가 서서히 보이면서 슬라이드 다운되는

행위가 보여질테니까 말이다.

슬라이드 예제를 2가지를 알아보자

첫 번째는 일반적인 사용법

두 번째는 슬라이드가 완료가 된 후 무언가 다음 코드를 실행하기 위해 callback 함수를 실행하는 방법

속성 옵션을 사용하면 좀 더 세밀하게 또는 좀 더 고급진 제어가 가능하다.

속성옵션 사용법 보러가기 ☜

이 두가지 방법을 예제를 통해서 알아보자.

Syntax

메서드	Syntax
slideDown()	$('선택요소').slideDown();
slideDown()	$('선택요소').slideDown(speed, callback);

🖥 소스 예제

1 - 1) 일반적인 사용법

// 일반적인 사용법
// slow, fast, 숫자(밀리세컨즈 1000 = 1초)
$('#panel').slideDown('fast'); // 속도 빠르게
$('#panel').slideDown(2000); // 속도 2초

1 - 2) 예제

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn").click(function(){
    $("#panel").slideDown();
  });
});
</script>
<style> 
#panel, #btn {
  padding: 5px;
  text-align: center;
  background-color: #e8685f;
  border: solid 1px #c3c3c3;
  color:#ffffff;
}

#panel {
  padding: 50px;
  display: none;
  width:150px;
}
</style>
</head>
<body>

  <button id="btn">slideDown 버튼</button>
  <hr>
  <div id="panel">콘텐츠</div>
</body>
</html>

2 - 1) callback 사용법

$("#panel").slideDown('slow', function(){
      alert('슬라이드 다운 행위가 끝나면 이 알럿창이 호출됩니다.');
});

2 - 2) 예제

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script> 
$(document).ready(function(){
  $("#btn").click(function(){
    $("#panel").slideDown('slow', function(){
      alert('슬라이드 다운 행위가 끝나면 이 알럿창이 호출됩니다.');
    });
  });
});
</script>
<style> 
#panel, #btn {
  padding: 5px;
  text-align: center;
  background-color: #e8685f;
  border: solid 1px #c3c3c3;
  color:#ffffff;
}

#panel {
  padding: 50px;
  display: none;
  width:150px;
}
</style>
</head>
<body>

  <button id="btn">slideDown 버튼</button>
  <hr>
  <div id="panel">콘텐츠</div>
</body>
</html>

💻 예제 구동 설명

1 - 2 ) 예제 ☜

div 요소가 처음부터 없는 상태이고,

slideDown 버튼을 클릭을 하면 서서히 요소가 아래 방향으로 나타나 지면서 보인다.

slideDown 버튼 : $("#btn") 요소이고, 클릭 이벤트를 등록하여 이 버튼을 클릭할 때

slide패널 : $('#panel').slideDown(2000); 이 메서드를 실행하여 2초 동안 슬라이드 다운되는 요소이다.

2 - 2 ) 예제 ☜

div 요소가 슬라이드 다운이 행위가 종료가 되면,

callback 함수에 정의한 alert 함수가 호출된다.

보면 function(){} 이 부분이 callback 함수이고, slideDown이라는 행위 자체가 끝나면

저 함수를 실행한다.

함수 내부에 정의한 alert() 호출 함수가 정의되어 있어서 즉, slideDown 메서드의 행위가 끝나면

alert창을 호출하게 된다.

저작자표시 비영리 변경금지

'web 언어 > jQuery' 카테고리의 다른 글

jQuery - slideToggle(슬라이드토글) 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.16
jQuery - slideUp(슬라이드업) 메서드, 실행 후 다른 코드 실행(callback) (0)	2022.05.16
jQuery - 불투명 조절 (fadeTo) 메서드, 실행 후 다른 코드 실행 (callback) (0)	2022.05.13
jQuery - 페이드토글(fadeToggle) 사용 및 실행 후 다른 코드 실행(callback) (0)	2022.05.12
jQuery - 페이드인(fadeIn), 페이드아웃(fadeOut), 메서드 실행 후 다른 코드 실행(callback) (0)	2022.05.11

열공의 기록