<!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>
<style>
.box{
position: absolute;
width: 100px;
height: 100px;
background-color: blue;
}
.haha{
position: absolute;
top:100px;
left:100px
}
</style>
</head>
<body>
<div class="box"></div>
<div class="haha">
<button id="btn1" type="button">오른쪽</button>
<button id="btn2" type="button">왼쪽</button>
</div>
</body>
<script>
// $("#btn1").on("click",()=>{
// $(".box").animate({left : 400},2000,()=>{
// $("#btn2").click()
// });
// //왼쪽 300px 만틈 이동하는 애니메이션
// });
$("#btn1").on("click",()=>{
$(".box").animate({left : 400},2000, ()=>{
$("#btn2").click()
} );
//왼쪽 300px 만틈 이동하는 애니메이션
});
// 이거는 대체 왜 안되는가?!?!?!
$("#btn2").on("click",()=>{
$(".box").animate({left : 0},1000,()=>{
$("#btn1").click()
});
//왼쪽 0으로 돌아오는 에니메이션
});
</script>
</html>
댓글 영역