1. Description
| jQuery(":animated") |
| 현재 움직이고 있는 요소를 선택한다. |
2. Example
[Exchange Position]버튼을 클릭하면 두 개의 박스가 서로 자리를 교환하기 시작하고, 버튼은 disabled된다.
[Change Border]를 클릭하면 박스의 border가 변경된다.
[Initialize Border]를 클릭하면 박스의 border가 초기화된다.
※ 박스가 움직이지 않는 상태에서는 [Change Border], [Initialize Border]버튼을 클릭해도 박스가 선택되지 않는다.
This is a box in yellow
box1
This is a box in green
box2
3. Code
더보기
<!-- ---------------------------------------------------------
--
-- Author: 1q74.tistory.com
--
--------------------------------------------------------- -->
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>[1q74.tistory.com] javascript/jquery/selector/animated</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
.box, .box1, .box2 {
width: 200px;
height: 200px;
position: absolute;
float: left;
}
.box1 {
z-index: 2;
background-color: yellow;
}
.box2 {
background-color: green;
text-align: right;
}
</style>
</head>
<body>
<p>This is a box in yellow</p>
<div class="box1">box1</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>This is a box in green</p>
<div class="box2">box2</div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div name="_1q74-example-bottom">
<button id="btn-exchange-position">Exchange Position</button>
<button id="btn-change-border">Change Border</button>
<button id="btn-init-border">Initialize Border</button>
</div>
<script>
var box1 = $(".box1");
var box2 = $(".box2");
const btnExchange = $("#btn-exchange-position");
const btnChangeBorder = $("#btn-change-border");
const btnInitBorder = $("#btn-init-border");
btnExchange.click(function() {
const pos = {
box1: box1.position(),
box2: box2.position()
};
const repeat = function() {
box1.animate({
opacity: 0.25,
top: pos.box2.top
},
{
duration: 8000,
complete: function() {
box1.css("opacity", 1);
// 움직임을 동기화시키기 위해서 box2의 이동이
// 종료되는 것을 opacity의 설정값으로 확인한 다음,
// box2의 이동이 완료되었다면 다시 서로의 위치를 맞바꾼다.
const timer = setInterval(function() {
if(box2.css("opacity") == 1) {
clearInterval(timer);
var tmpBox = box1;
box1 = box2;
box2 = tmpBox;
repeat();
}
}, 100);
}
});
box2.animate({
opacity: 0.25,
top: pos.box1.top
},
{
duration: 8000,
complete: function() {
box2.css("opacity", 1);
}
});
}
$(this).prop("disabled", true);
repeat();
});
// jQuery(":animated") Selector 예제
btnChangeBorder.click(function() {
$("div:animated").css("border-style", "dotted");
});
btnInitBorder.click(function() {
box1.css("border-style", "");
box2.css("border-style", "");
});
</script>
<style>
[name|="_1q74-example"] button
,[name="_1q74-source"] button {
background: lightgray;
border: 5px outset;
min-width: 160px;
min-height: 40px;
}
[name|="_1q74-example"] button:active
,[name="_1q74-source"] button:active {
border: 2px inset;
min-width: 160px;
min-height: 40px;
}
</style>
</body>
</html>4. File
5. See also
pseudo-class, useversal-selector, jquery-extensions
6. Reference
https://api.jquery.com/animated-selector/
'JavaScript > jQuery' 카테고리의 다른 글
| 【jQuery/Selector #6】Attribute Ends With Selector [name$=”value”] (0) | 2023.02.21 |
|---|---|
| 【jQuery/Selector #5】Attribute Contains Word Selector [name~=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #4】Attribute Contains Selector [name*=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #3】Attribute Contains Prefix Selector [name|=”value”] (0) | 2023.02.21 |
| 【jQuery/Selector #1】All Selector (“*”) (0) | 2023.02.19 |