SeouliteLab

jQuery :animated Selector - 애니메이션 중인 요소를 선택하여 조작 본문

프로그래밍

jQuery :animated Selector - 애니메이션 중인 요소를 선택하여 조작

Seoulite Lab 2024. 4. 9. 08:52

예제 1: 애니메이션 중인 요소 선택

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery :animated Selector 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#startBtn").click(function(){
        $("#box").animate({left: '250px'}, 2000);
      });

      $("#stopBtn").click(function(){
        $("#box").stop();
      });

      $("#checkBtn").click(function(){
        if($("#box").is(":animated")) {
          alert("애니메이션 중입니다.");
        } else {
          alert("애니메이션이 실행 중이 아닙니다.");
        }
      });
    });
  </script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
  </style>
</head>
<body>
  <button id="startBtn">시작</button>
  <button id="stopBtn">정지</button>
  <button id="checkBtn">애니메이션 상태 확인</button>
  <div id="box"></div>
</body>
</html>

설명:

이 예제는 jQuery의 :animated Selector를 사용하여 애니메이션 중인 요소를 선택하는 방법을 보여줍니다.

  • $("#box").is(":animated")을 사용하여 #box 요소가 현재 애니메이션 중인지 확인합니다.
  • 시작 버튼을 클릭하면 #box 요소가 오른쪽으로 이동하는 애니메이션을 시작합니다.
  • 정지 버튼을 클릭하면 #box 요소의 애니메이션을 정지합니다.
  • 애니메이션 상태 확인 버튼을 클릭하면 현재 #box 요소가 애니메이션 중인지 알림창으로 확인할 수 있습니다.

예제 2: 애니메이션 중인 요소에 특정 스타일 적용하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery :animated Selector 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#startBtn").click(function(){
        $("#box").animate({left: '250px'}, 2000);
      });

      $("#stopBtn").click(function(){
        $("#box").stop();
      });
    });

    $(document).ajaxStart(function(){
      $("#loader").show();
    });

    $(document).ajaxStop(function(){
      $("#loader").hide();
    });
  </script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
    #loader {
      display: none;
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <button id="startBtn">애니메이션 시작</button>
  <button id="stopBtn">애니메이션 정지</button>
  <div id="box"></div>
  <div id="loader"></div>
</body>
</html>

설명:

이 예제는 jQuery의 :animated Selector를 사용하여 애니메이션 중인 요소에 특정 스타일을 적용하는 방법을 보여줍니다.

  • $(document).ajaxStart()와 $(document).ajaxStop()을 사용하여 AJAX 요청이 시작 및 종료될 때 애니메이션 효과를 보여주는 예제입니다.
  • #loader는 AJAX 요청이 실행 중일 때 표시되는 로딩 스피너를 나타냅니다.
  • $(document).ajaxStart()에서 $("#loader").show()를 사용하여 AJAX 요청이 시작되면 로딩 스피너를 표시합니다.
  • $(document).ajaxStop()에서 $("#loader").hide()를 사용하여 AJAX 요청이 종료되면 로딩 스피너를 숨깁니다.

예제 3: 애니메이션 중인 요소에 클래스 추가하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery :animated Selector 예제</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
    $(document).ready(function(){
      $("#startBtn").click(function(){
        $("#box").animate({left: '250px'}, 2000, function(){
          $(this).addClass("highlight");
        });
      });

      $("#stopBtn").click(function(){
        $("#box").stop();
      });
    });
  </script>
  <style>
    #box {
      width: 100px;
      height: 100px;
      background-color: red;
      position: relative;
    }
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <button id="start

Btn">애니메이션 시작</button>
  <button id="stopBtn">애니메이션 정지</button>
  <div id="box"></div>
</body>
</html>

설명:

이 예제는 jQuery의 :animated Selector를 사용하여 애니메이션 중인 요소에 클래스를 추가하는 방법을 보여줍니다.

  • $("#box").animate() 함수의 콜백 함수에서 $(this).addClass("highlight")를 사용하여 애니메이션이 완료된 후에 #box 요소에 "highlight" 클래스를 추가합니다.
  • CSS를 통해 "highlight" 클래스에 배경색을 지정하여 애니메이션 완료 후에 특정 스타일을 적용합니다.

jQuery의 :animated Selector를 사용하면 현재 애니메이션 중인 요소를 선택하여 조작할 수 있습니다. 위 예제들을 통해 다양한 상황에서의 활용법을 익혀보세요.

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

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

jQuery 속성값이 특정 문자열을 포함하는 요소 선택자 [name*=”value”]  (0) 2024.04.09
jQuery 속성값이 특정 접두사를 포함하는 요소 선택자 [name|=”value”]  (0) 2024.04.09
jQuery All Selector (“*”)를 이용한 요소 선택  (0) 2024.04.09
jQuery.boxModel  (0) 2024.04.09
jQuery .andSelf() 메서드  (0) 2024.04.09
'프로그래밍' Related Articles more