jQuery

[Selector] JQ - :animated 선택자 - 움직이는 동적 요소 선택. (= 애니메이티드 선택자)

목차
  1. :animated 예제 - 현재 움직이는 요소 배경색 변경.
  2. :animated 정의
  3. :animated 구문

 

:animated 예제 - 현재 움직이는 요소 배경색 변경.

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script> 

$(document).ready(function(){

  function move(){

    $("div:eq(0)").animate({width: "50%"}, "slow");

    $("div:eq(0)").animate({width: "100%"}, "slow", move);

  }

  move();

  $(".btn").click(function(){

    $(":animated").css("background-color", "red");

  });

});

</script>


<button class="btn">클릭</button>


<div style="background:lightblue;">홈짱닷컴</div>

<div style="background:pink;">Homzzang.com</div>

<div style="background:yellow;">홈페이지 제작관리 강의</div>


결과보기

 

:animated 정의

 

현재 움직이는 동적 요소 모두 선택.

 

 

:animated 구문

 

$(":animated")

 

 


분류 제목
Selector JQ - :first 가상선택자 - 가장 첫번째 지정요소 선택. (= 맨 처음 요소 선택 = 퍼스트 선택자)
Selector JQ - :last 가상선택자 - 가장 마지막 지정 요소 선택. (= 맨뒤 요소 선택 = 라스트 선택자)
Selector JQ - :even 가상선택자 - 짝수 번째 요소 선택. (= 이븐 선텍자)
Selector JQ - :odd 가상선택자 - 홀수 번째 요소 선택. (= 아드 선택자)
Selector JQ - :first-child 가상선택자 - 첫번째 자식요소 선택. (= 퍼스트 차일드 선택자)
Selector JQ - :first-of-type 가상선택자 - 타입 고려 첫번째 자식요소 선택. (= :first-of-…
Selector JQ - :last-child 가상선택자 - 마지막 자식요소 선택. (= 라스트 차일드 선택자)
Selector JQ - :last-of-type 가상선택자 - 타입 고려 마지막 자식요소 선택. (= 라스트 어브 타입 선…
Selector JQ - :nth-child(n) 가상선택자 - 타입 무관 n번째 자식요소 모두 선택. (= nth-chil…
Selector JQ - :nth-last-child(n) 가상선택자 - 타입 무관 마지막 n번째 자식요소 모두 선택. (=…
Selector JQ - :nth-of-type(n) 가상선택자 - 타입 고려 n번째 자식요소 모두 선택. (= 엔스 오브 …
Selector JQ - :nth-last-of-type(n) 가상선택자 - 타입 고려 마지막 N번째 자식요소 선택. (= …
Selector JQ - :only-child 가상선택자 - 그 부모의 타입 무관 유일 자식요소 모두 선택. (= 온리 차일…
Selector JQ - :only-of-type 가상선택자 - 그 부모의 타입 고려 유일 자식요소 모두 선택. (= 온리 …
Selector JQ - parent > child 선택자 ★ - 직접자식요소만 모두 선택 (= 직계자식요소 선택 = 자식선…
4/20
목록
 홈  PC버전 로그인 일본어
그누앞단언어
그누뒷단언어
그외코딩언어
그누보드
제작의뢰
Q&A
커뮤니티 2
웹유틸
회원센터
홈짱닷컴 PC버전 로그인