SeouliteLab

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

프로그래밍

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

Seoulite Lab 2024. 4. 1. 08:41

jQuery의 .fadeTo() 메서드는 선택한 요소의 투명도를 지정된 값으로 부드럽게 조절합니다. 이를 통해 웹 페이지에서 요소의 투명도를 부드럽게 변화시킬 수 있습니다. .fadeTo() 메서드의 사용법과 몇 가지 예제를 살펴보겠습니다.

예제 1: 요소의 투명도 조절

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeTo() 예제</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").fadeTo(1000, 0.5); // 1초 동안 투명도를 0.5로 조절
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소의 투명도를 1초 동안 0.5로 조절합니다.

예제 2: 요소의 투명도 조절 후 다시 되돌리기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeTo() 예제</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").fadeTo(1000, 0.2, function() {
      $(this).fadeTo(1000, 1); // 1초 동안 투명도를 0.2로 조절한 후 1로 다시 되돌리기
    });
  });
</script>

</body>
</html>

위 코드에서는 id가 "box"인 요소의 투명도를 1초 동안 0.2로 조절한 후, 콜백 함수를 사용하여 1로 다시 되돌립니다.

예제 3: 여러 요소의 투명도 일괄 조절

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeTo() 예제</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").fadeTo(1000, 0.2); // 1초 동안 모든 circle 클래스를 가진 요소의 투명도를 0.2로 조절
  });
</script>

</body>
</html>

위 코드에서는 클래스가 "circle"인 모든 요소의 투명도를 1초 동안 0.2로 조절합니다.

.fadeTo() 메서드를 사용하면 선택한 요소의 투명도를 부드럽게 조절할 수 있습니다. 메서드에는 첫 번째 매개변수로 애니메이션의 지속 시간을, 두 번째 매개변수로 투명도 값을 전달합니다.

위 예제들에서는 다양한 상황에서 .fadeTo() 메서드를 사용하여 요소의 투명도를 부드럽게 조절합니다.

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

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

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