<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style> #div1 { background:pink; position:absolute;
top:0; left:0; padding:25px; }
/* position:absolute 절대 위치 */
</style>
<script>
$(function(){
$('#div1').animate({top: 200, left: 0 }, 1000);
$('#div1').animate({top: 200, left: 400 }, 1000);
$('#div1').animate({top: 0, left: 400 }, 1000);
$('#div1').animate({top: 0, left: 0 }, 1000);
$('#div1').animate({top: 200, left: 400 }, 1000);
});
</script>
</head>
<body>
<div id="div1">box</div>
</body>
</html> $(function(){
var div1 = $('#div1');
var img = $("<img src='../img/dog.jpg'>");
div1.animate({top: 200, left: 400 }, 1000);
div1.animate({top: 0, left: 400 }, 1000,
function(){alert("쉬어가세요");});
div1.animate({top: 200, left: 0 }, 1000);
div1.animate({top: 0, left: 0 }, 1000);
img.appendTo(div1);
});변수를 만들어줘서 간단하게 불러서 쓸수도 있다.
$(function(){
var img = $("<img src='../img/dog.jpg'>");
$('#div1').animate({top: 200, left: 400 }, 1000,
function(){ $(this).animate({ top:0, left:400 },1000,
function(){ $(this).animate({ top:200, left:0 },1000,
function(){ $(this).animate({ top:0, left:0 },1000)}
)})
}
);
img.appendTo(div1);
});이렇게 하나로 줄일 수도 있다. 그런데 더 헷깔림..
본인이 편한 방법을 찾아서 사용하면 됨!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="../jquery-3.6.0.min.js"></script>
<style> #div1 { background:pink; position:absolute;
top:0; left:0; padding:25px; }
/* position:absolute 절대 위치 */
img{ width: 150px; height: 100px; }
</style>
<script>
$(function(){
var div1 = $('#div1');
var img = $("<img src='../img/dog.jpg'>");
div1.animate({top: 200, left: 400 }, 1000);
div1.animate({top: 0, left: 400 }, 1000,
function(){alert("쉬어가세요");});
div1.animate({top: 200, left: 0 }, 1000);
div1.animate({top: 0, left: 0 }, 1000);
img.appendTo(div1);
});
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>중간에 쉬어가기
div1.animate({top: 0, left: 400 }, 1000,
function(){alert("쉬어가세요");});
'개발일지 > JavaScript + jquery' 카테고리의 다른 글
| JavaScript에서 value의 기능? (0) | 2021.11.05 |
|---|---|
| 자바스크립트 정리 및 예제들 (0) | 2021.11.03 |
| [jquery] radio 입력 받아서 출력하기 (0) | 2021.09.14 |
| [jquery] 변수명을 설정해서 쉽게 부르기(feat.alert) (0) | 2021.09.14 |
| [jquery] each() 명령어 (0) | 2021.09.13 |
