:animated selector는 그다지 사용하지 않는 selector이긴 하지만 공부하는 차원에서 작성해 봅니다.
예제)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>animated demo</title>
<style>
div {
background: yellow;
border: 1px solid #AAA;
width: 80px;
height: 80px;
margin: 0 5px;
float: left;
}
div.colored {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button id="run">Run</button>
<div></div>
<div id="mover"></div>
<div></div>
<script>
$( "#run" ).click(function() {
$( "div:animated" ).toggleClass( "colored" );
});
function animateIt() {
$( "#mover" ).slideToggle( "slow", animateIt );
}
animateIt();
</script>
</body>
</html>실행 모습)
설명)
우선 :animated는 jQuery에서 애니메이션 진행 상태에가 있는 요소를 찾습니다.
$( "#run" ).click(function() {
$( "div:animated" ).toggleClass( "colored" );
});
run이라는 엘리먼트 요소 버튼을 클릭했을 경우
document안에 div 요소 중 :animated 즉, 애니메이션 동작을 하고 있다면 colored 클래스를 토글 방식으로 적용했다 안했다를 반복해라라는 뜻이 되겠네요.
div 박스의 기본 background color는 노란색인데 colored는 녹색이죠. colored 클래스를 적용 했을 때는 녹색, 뺐을 때는 노란색 이렇게 반복하는 것입니다.
function animateIt() {
$( "#mover" ).slideToggle( "slow", animateIt );
}
animateIt이라는 function은 mover라는 아이디를 가진 요소에 슬라이드로 천천히 움직이는 애니메이션을 적용합니다.
슬라이드가 완료되고 나면 또 다시 자기 자신 함수인 animateIt를 호출하게 됩니다. 즉, 무한 반복인 셈이 되네요.
animateIt(); 이 문구로 처음 화면 열리면서 애니메이션이 시작한거죠.
실제 코드가 동작하는 것을 구경하고 싶으시면 https://api.jquery.com/animated-selector/에 방문해 보시면 됩니다.
'development > script' 카테고리의 다른 글
| 파이썬에서 터미널 지우기 (0) | 2020.05.24 |
|---|---|
| jQuery Selector 지정한 단어있는 요소 찾기 (0) | 2018.03.10 |
| jQuery 셀렉터 :checkbox (0) | 2018.03.09 |
| jQuery 셀렉터 :button (0) | 2018.03.09 |
| jQuery 셀렉터 특정 문자열로 시작하는 요소 찾기 (0) | 2018.03.09 |