반응형
<!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>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
.circle{
position : absolute;
left : 100px; top :100px;
width : 100px ; height :100px;
background : #99c; color: white;
border-radius :50%;
text-align : center;
line-height: 100px;
}
</style>
</head>
<body>
<div class ="circle" onclick ="anim()">animation</div>
<script>
function anim(){
$('.circle').animate({
width: '300px',
height: '300px',
lineHeight: '300px',
fontSize : '3em'
}, 1000)
}
</script>
</body>
</html>animate(속성, 재생시간,속도 변화 옵션, 콜백함수)
$('.circle').animate({
width: '300px',
height: '300px',
lineHeight: '300px',
fontSize : '3em'
}, 1000)
눌렀을 때 원이 animate에 정의한대로 애니메이션 처리가 됩니다.
반응형