SeouliteLab

jQuery .slideUp() 메서드 이해와 활용 예제 본문

프로그래밍

jQuery .slideUp() 메서드 이해와 활용 예제

Seoulite Lab 2024. 4. 1. 08:54

jQuery의 .slideUp() 메서드는 요소를 위로 슬라이드하여 숨깁니다. 이를 통해 웹 페이지에서 요소의 부드러운 숨김 효과를 적용할 수 있습니다. .slideUp() 메서드의 사용법과 예제를 살펴보겠습니다.

예제 1: 기본적인 요소의 슬라이드 업

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .slideUp() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="box">이 요소를 숨깁니다.</div>
<button id="slideUpBtn">슬라이드 업</button>

<script>
  $(document).ready(function() {
    $("#slideUpBtn").click(function() {
      $("#box").slideUp(); // 요소를 위로 슬라이드하여 숨김
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 요소를 위로 슬라이드하여 숨깁니다.

예제 2: 다양한 속도로 슬라이드 업

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .slideUp() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="box">이 요소를 숨깁니다.</div>
<button id="slideUpSlowBtn">느린 슬라이드 업</button>
<button id="slideUpFastBtn">빠른 슬라이드 업</button>

<script>
  $(document).ready(function() {
    $("#slideUpSlowBtn").click(function() {
      $("#box").slideUp("slow"); // 천천히 위로 슬라이드하여 숨김
    });
    $("#slideUpFastBtn").click(function() {
      $("#box").slideUp("fast"); // 빠르게 위로 슬라이드하여 숨김
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭하면 천천히 또는 빠르게 요소를 위로 슬라이드하여 숨깁니다.

예제 3: 콜백 함수와 함께 슬라이드 업

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .slideUp() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div id="box">이 요소를 숨깁니다.</div>
<button id="slideUpBtn">슬라이드 업</button>

<script>
  $(document).ready(function() {
    $("#slideUpBtn").click(function() {
      $("#box").slideUp("slow", function() {
        alert("슬라이드 업 완료!"); // 슬라이드 업 완료 후 알림창 표시
      });
    });
  });
</script>

</body>
</html>

위 코드에서는 요소를 위로 슬라이드한 후에 콜백 함수를 실행하여 알림창을 표시합니다.

.slideUp() 메서드는 요소를 위로 슬라이드하여 숨깁니다. 요소가 이미 화면에서 숨겨진 상태이면 아무런 변화가 없습니다. .slideUp() 메서드는 CSS의 display 속성을 변경하여 요소를 화면에서 숨기는 효과를 줍니다.

위 예제들에서는 .slideUp() 메서드를 사용하여 요소를 위로 슬라이드하여 숨기는 방법을 살펴보았습니다.

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

'프로그래밍' 카테고리의 다른 글

jQuery .toggle() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .stop() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideToggle() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .slideDown() 메서드 이해와 활용 예제  (0) 2024.04.01
jQuery .show() 메서드 이해와 활용 예제  (0) 2024.04.01
'프로그래밍' Related Articles more