개발일지/JavaScript + jquery
[jquery] animate 기능 움직이다가 멈추기 alert (복습)
연습용365
2021. 9. 14. 09:39
<!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("쉬어가세요");});