<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
div {
width: 100px;
height: 100px;
margin: 10px;
}
#box1 {
background-color: blue;
}
#box2 {
background-color: green;
}
#box3 {
background-color: red;
}
#box4 {
position: absolute;
background-color: black;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<button id="btn1" type="button">중단</button>
<button id="btn2" type="button">종료</button>
<script>
$("#box1").animate({width: "200px", height: "200px"}, 3000, () => {
alert("확대완료");
});
$("#box2").delay(4000).animate({backgroundColor: "orange"}, 1000, () => {
console.log("배경색 오렌지");
});
$("#box3").animate({opacity: 0.1}, 1000, () => {
console.log("배경색 오렌지");
}).animate({opacity: 1}, 1000);
//marginleft로 box3을 250px 이동했따가 다시 100px로 돌아오도록 2000
$("#box4").animate({left: 250}, 1000).animate({left: 0}, 1000);
$("#btn1").on('click', () => {
$("#box4").stop();
});
$("#btn2").on('click', () => {
$("#box4").finish();
});
//딜레이는 조금이따 실행하는거
// 스톱은 그냥 스톱
// 피니시는 걍 중간단계 끝내고 실행시켜버리는거
</script>
</body>
</html>
댓글 영역