<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width: 100px;
height: 100px;
background-color: red;
/* position : relative; */
position : absolute;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function() {
$('div').animate({
/* width : '50px',
height: "+=100px" */
/* width : 'toggle',
height : 'toggle', */
left : '100px',
top : '50px'
}, 2000)
})
</script>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script src="/Lecture-WEB/jquery/js/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$('div').animate({
'width' : '200px'
}, 1000)
$('div').animate({
left: '100px',
width: '100px'
}, 2000)
$('div').animate({
'height' : '200px',
'top' : '100px'
}, 1000)
$('div').animate({
'height' : '100px',
'left' : '0px',
'opacity' : '0.4',
'background-color' : 'purple',
'border-radius' : '50%'
}, 2000, function(){ // 콜백함수 형태로 붙인다
$(this).css('background-color', 'pink')
})
})
</script>
</head>
<body>
<div></div>
</body>
</html>