728x90
반응형
<!DOCTYPE html>
<!-- src/main/webapp/20220426/animate2.html -->
<html>
<head>
<meta charset="UTF-8">
<title>컴포넌트 이동하기2</title>
<style type="text/css">
div {
width : 50px;
height : 50px;
background-color : orange;
position : relative;
}
</style>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#div1").click(function(){
var width = $(this).css("width"); //width의 값 50
var height = $(this).css("height"); //height의 값 50
$(this).animate({
width : "+=50", //현재 width에서 +50 설정
height : "+=50" //현재 height에서 +50 설정
},'slow')
});
$("#div2").click(function(){
$(this).animate({
left : "+=50" //2초동안 left값을 50 증가.
},2000).animate({
width : "+=50" //2초동안 width값을 50 증가.
},2000).animate({
height : "+=50" //2초동안 height값을 50 증가.
},2000)
});
$("#div3").animate({left : "+=50"},2000); //2초동안 left값을 50 증가.
$("#div3").animate({width : "+=50"},2000); //2초동안 width값을 50 증가.
$("#div3").animate({height : "+=50"},2000); //2초동안 height값을 50 증가.
setTimeout(function(){
$("#div3").clearQueue; //설정된 animate 취소
$("#div3").hide; //보이지 않도록 함
},6000)
setTimeout(function(){
$("#div3").slow; //보여지도록 함
},7000)
});
</script>
</head>
<body>
<div id = "div1"></div><br>
<div id = "div2"></div><br>
<div id = "div3"></div>
</body>
</html>728x90
반응형
'study > Jquery' 카테고리의 다른 글
| [Jquery] 23. jquery xml 예제1 (서울 구 보기) (0) | 2022.04.27 |
|---|---|
| [Jquery] 21. Jquery slideimg (setInterval) (0) | 2022.04.26 |
| [Jquery] 21. Jquery animate1 (animate) (0) | 2022.04.26 |
| [Jquery] 21. Jquery game (그림 맞추기 게임만들기) (0) | 2022.04.25 |
| [Jquery] 21. Jquery table ($(this).index(), $(this).parent().children().index(this), td:nth-of-type()) (0) | 2022.04.25 |