2024-10-17
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h1 {
width: 50px;
height: 30px;
background-color: red;
font-size: 120%;
color: #fff;
}
h2 {
width: 50px;
height: 30px;
background-color: blue;
font-size: 120%;
color: #fff;
}
h3 {
width: 50px;
height: 30px;
background-color: yellow;
font-size: 120%;
}
</style>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script>
/*
- animate : 선택한 요소에 다양한 동작(motion) 효과를 적용하는 함수.
형식) $("요소 선택").animate({애니메이션 동작}, 효과속도(ms), 콜백함수);
==> 애니메이션 동작은 모션으로 적용할 속성을 CSS(스타일)을 이용해서 입력함.
그리고 효과 속도는 ms(1/1000) 또는 "slow", "normal", "fast" 로도
입력이 가능함.
*/
$(function() {
$("h1").animate({marginLeft: "250px"}, 5000, function() {
alert("도착 했습니다.");
});
$("h2").animate({marginLeft: "250px", width : "100px", opacity: 0.25},
5000,);
$("h3").animate({marginLeft: "250px"}, 3000, function() {
$("h3").animate({marginLeft: "100px"}, 2000);
});
});
</script>
</head>
<body>
<h1>내용1</h1>
<h2>내용2</h2>
<h3>내용3</h3>
</body>
</html>
'JQuery > 기초 내용 정리' 카테고리의 다른 글
| JQuery(Exam)_01 (2) | 2024.10.17 |
|---|---|
| JQuery(Animation)_07 (0) | 2024.10.17 |
| JQuery(Animation)_05 (0) | 2024.10.17 |
| JQuery(Animation)_04 (0) | 2024.10.17 |
| JQuery(Animation)_03 (0) | 2024.10.17 |