반응형
jQuery를 이용하면서 animate 메서드를 많이 사용을 한다.
이 메서드는 각 요소들을 움직이거나 또는 보이게 하거나 숨기거나 등등 눈으로 직접적으로
확인할 수 있는 행동들을 조작하게 해 준다.
이러한 animate을 하고 있는 요소를 선택하는 방법을 예제를 통해서 알아보자.
예제
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style type="text/css">
.box{
width:200px;
height:200px;
background:red;
display: inline-block;
position: relative;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$('#animateStart').on('click' ,function(){
$(".box").animate({ left : "250px" },10000); // 애니메이션 시킴 10초동안 left 기점으로부터 250픽셀 움직임
});
$('#selectorConfirm').on('click', function(){
if($(".box").is(':animated')) { // 현재 에니메이션 중인 요소를 확인하는 구간
$('#txtOutput').text('.box div 가 현재 animate 중이며, div 색을 바꾸겠습니다.');
$(".box").css({'background':'blue'});
}else{
$('#txtOutput').text('.box div 현재 아무런 동작을 하지 않습니다.');
}
});
});
</script>
</head>
<body>
<div class="box"></div>
<br>
<br>
<p id="txtOutput"></p>
<button id="animateStart">animate 시작</button>
<button id="selectorConfirm">선택자 확인</button>
</body>
</html>
위 코드의 내용을 보면 animate 시작 버튼을 클릭을 하게 되면 가로세로 200 픽셀의 빨간색 div 요소가
왼쪽 기준점으로부터 250픽셀 10초 동안 움직이는 코드이다.
그 10초 동안 움직이는 도중에 선택자 확인 버튼을 클릭하게 되면 현재 애니메이션, 즉 움직이는 요소를
선택해서 배경색을 파란색으로 바꾸는 코드이다.
현재 animate 동작을 판단하는 구문
if($("현재 animate를 판단하려는 선택자").is(':animated')) { // 현재 에니메이션 중인 요소를 확인하는 구간
// 요소가 animate 중.
}else{
// 요소가 animate 중이 아님.
}
테스트를 2가지를 진행하면 된다. 테스트를 진행할 때마다 F5 새로고침은 필수!
- animate 시작 버튼을 클릭하고 10초 동안 움직임이 끝나기 전에 선택자 확인 버튼을 클릭하여 요소가 선택이 되는지 확인하기
- animate 시작 버튼을 누르지 않고 그냥 선택자 확인 버튼을 클릭하여 요소가 선택되는지 확인하기
이렇게 2가지 테스트를 진행하면 된다.
2번 경우는 animate 동작을 하지 않기 때문에 선택이 안 되는 것을 확인할 수 있다.
결과화면
반응형
'web 언어 > jQuery' 카테고리의 다른 글
| jQuery - 제이쿼리(jQuery)객체를 DOM 객체로 변환하는 방법 (0) | 2022.03.16 |
|---|---|
| jQuery - 가시성(visible/hidden)을 기준으로 요소 선택하기 (0) | 2022.03.16 |
| jQuery - 라디오(radio), 체크박스(checkbox) 클릭 된 요소 알기 (0) | 2022.03.15 |
| jQuery - DOM 요소 복제해서 다른 요소에 붙여넣기 (0) | 2022.03.15 |
| jQuery - 셀렉터(selector) 선택자 (자식필터를 사용하여 요소선택 - nth-child()) (0) | 2022.03.14 |