SeouliteLab

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

프로그래밍

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

Seoulite Lab 2024. 4. 1. 08:41

jQuery의 .fadeToggle() 메서드는 선택한 요소의 가시성을 토글(toggle)하는데, 투명도를 조절하면서 요소를 나타내거나 숨깁니다. 이를 통해 웹 페이지에서 요소의 나타남과 사라짐을 부드럽게 토글할 수 있습니다. .fadeToggle() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 요소의 나타남과 사라짐 토글

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeToggle() 예제</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>
<button id="toggleBtn">토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      $("#box").fadeToggle(1000); // 1초 동안 요소를 부드럽게 나타내거나 숨김
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭할 때 요소의 나타남과 사라짐을 부드럽게 토글합니다.

예제 2: 요소의 나타남과 사라짐 토글 후 콜백 함수 실행

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeToggle() 예제</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>
<button id="toggleBtn">토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      $("#box").fadeToggle(1000, function() {
        alert("토글 완료!"); // 토글이 완료된 후에 실행될 콜백 함수
      });
    });
  });
</script>

</body>
</html>

위 코드에서는 요소의 나타남과 사라짐을 부드럽게 토글한 후에 알림창이 뜨도록 설정되어 있습니다.

예제 3: 여러 요소의 토글

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeToggle() 예제</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>
<button id="toggleBtn">토글</button>

<script>
  $(document).ready(function() {
    $("#toggleBtn").click(function() {
      $(".circle").fadeToggle(1000); // 1초 동안 모든 circle 클래스를 가진 요소의 나타남과 사라짐을 부드럽게 토글
    });
  });
</script>

</body>
</html>

위 코드에서는 버튼을 클릭할 때 모든 요소의 나타남과 사라짐을 부드럽게 토글합니다.

.fadeToggle() 메서드는 선택한 요소의 가시성을 부드럽게 토글하며, 요소가 현재 숨겨져 있다면 나타내고, 현재 나타나있다면 숨깁니다.

위 예제들에서는 다양한 상황에서 .fadeToggle() 메서드를 사용하여 요소의 가시성을 부드럽게 토글합니다.

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

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

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