SeouliteLab

jQuery .fadeOut() 메서드의 활용 예제와 설명 본문

프로그래밍

jQuery .fadeOut() 메서드의 활용 예제와 설명

Seoulite Lab 2024. 4. 1. 08:38

jQuery의 .fadeOut() 메서드는 선택한 요소를 부드럽게 숨김 처리합니다. 이를 통해 웹 페이지에서 요소를 부드럽게 사라지게 할 수 있습니다. .fadeOut() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 요소의 사라지기 애니메이션

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeOut() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
    }
  </style>
</head>
<body>

<div id="box"></div>

<script>
  $(document).ready(function() {
    $("#box").fadeOut(1000); // 1초 동안 사라지기 애니메이션
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소를 1초 동안 부드럽게 사라지게 합니다.

예제 2: 요소 그룹의 순차적인 사라지기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeOut() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    .circle {
      width: 100px;
      height: 100px;
      background-color: red;
      margin: 10px;
    }
  </style>
</head>
<body>

<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>

<script>
  $(document).ready(function() {
    $(".circle").each(function(index) {
      $(this).delay(500 * index).fadeOut(1000); // 인덱스에 따라 순차적으로 사라지기 애니메이션
    });
  });
</script>

</body>
</html>

위 코드에서는 클래스가 "circle"인 요소들을 순차적으로 사라지게 합니다. .each() 메서드를 사용하여 각 요소마다 지연시간을 적용하여 순차적으로 사라지게 합니다.

예제 3: 클릭 이벤트 후 요소의 사라지기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeOut() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #text {
      display: block; /* 초기에는 보임 상태 */
    }
  </style>
</head>
<body>

<button id="btn">사라지기</button>
<p id="text">안녕하세요! 반가워요.</p>

<script>
  $(document).ready(function() {
    $("#btn").click(function() {
      $("#text").fadeOut(1000); // 버튼 클릭 시 요소가 1초 동안 사라지게 함
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭할 때 요소가 부드럽게 사라지게 합니다.

.fadeOut() 메서드를 사용하면 선택한 요소를 부드럽게 사라지게 할 수 있습니다. 메서드에 전달되는 매개변수는 애니메이션의 지속 시간을 밀리초 단위로 나타냅니다.

위 예제들에서는 다양한 상황에서 .fadeOut() 메서드를 사용하여 요소를 부드럽게 사라지게 합니다.

저작자표시 비영리 변경금지 (새창열림)

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

jQuery .fadeToggle() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeTo() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .fadeIn() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .delay() 메서드의 활용 예제와 설명  (0) 2024.04.01
jQuery .animate() 메서드의 활용 예제와 설명  (0) 2024.04.01
'프로그래밍' Related Articles more