jQuery - 애니메이션 셀렉터

:animated 셀렉터는 애니메이션이 진행 중인 요소를 선택할 수 있습니다.

처음에는 노랑색 배경의 박스가 늘었다가 줄었다가 반복하는데, 클릭하면 빨간색 배경으로 변하는 예제입니다.

<style>
#use-nth {
  border: 1px solid;
  width: 200px;
  padding: 10px;
  background: yellow;
}
</style>

<script>
$(function(){
  function use_animated() { 
    $("#use-nth").animate({ 
      height: "50%" 
    }, "slow"); 
    $("#use-nth").animate({ 
      height: "90%" 
    }, "slow", use_animated); 
  } 
  use_animated();

  $("#use-nth").click(function() { 
    $(":animated").css("background-color", "#f01"); 
  });
});
</script>

<div id="use-nth">
  <div>안녕 하보니</div>
</div>

출처: https://www.geeksforgeeks.org/jquery-animated-selector-with-examples/