SeouliteLab

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

프로그래밍

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

Seoulite Lab 2024. 4. 1. 08:36

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

예제 1: 요소의 나타나기 애니메이션

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeIn() 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: blue;
      display: none; /* 초기에는 숨김 상태 */
    }
  </style>
</head>
<body>

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

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

</body>
</html>

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

예제 2: 요소 그룹의 순차적인 나타나기

<!DOCTYPE html>
<html>
<head>
  <title>jQuery .fadeIn() 예제</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;
      display: none; /* 초기에는 숨김 상태 */
    }
  </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).fadeIn(1000); // 인덱스에 따라 순차적으로 나타나기 애니메이션
    });
  });
</script>

</body>
</html>

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

예제 3: 클릭 이벤트 후 요소의 나타나기

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

<button id="btn">나타내기</button>
<p id="text">안녕하세요! 반가워요.</p>

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

</body>
</html>

위 코드에서는 버튼을 클릭할 때 요소가 부드럽게 나타나도록 합니다.

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

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

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

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

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