반응형
:animated 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/에 방문해 보시면 됩니다.
반응형
'Programming' 카테고리의 다른 글
| jQuery Selector (“parent > child”) (0) | 2018.03.11 |
|---|---|
| jQuery Selector :checked (0) | 2018.03.11 |
| jQuery Selector 지정 문자열로 시작하는 요소 찾아봅시다 (0) | 2018.03.09 |
| jQuery Selector :checkbox (0) | 2018.03.09 |
| jQuery Selector 버튼 형식 찾기 (0) | 2018.03.09 |