고정 헤더 영역
상세 컨텐츠
본문
제이쿼리를 이용하면 페이지 요소에 대해 요소의 크기, 투명도, 경계선, 위치 등에 애니메이션 효과
▶ 제이쿼리 애니메이션 메소드
| 메소드 | 설명 |
| animate( ) | 선택된 요소에 애니메이션 효과를 준다 |
| stop( ) | 선택된 요소에서 진행중인 애니메이션을 멈춘다 |
▶ animate( ) 메소드
$("선택자").animate(스타일, 실행시간) |
1)
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("div").animate({ left: "300px" }, 3000);
});
$("#btn2").click(function () {
$("div").animate({ left: 0 });
});
});
</script>
<style>
div {
background-color: pink;
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<p>
<button id="btn1">Animation</button>
<button id="btn2">Reset</button>
</p>
<div></div>
</body>
ex10-12-start.html
0.00MB
2)
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("div").animate({
left: "300px",
height: "200px",
width: "200px"
}, 3000);
$("div").css("background-color", "blue");
});
$("#btn2").click(function () {
$("div").animate({
left: "0",
height: "100px",
width: "100px"
}, 3000);
$("div").css("background-color", "red");
});
});
</script>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<p>
<button id="btn1">Animation</button>
<button id="btn2">Reset</button>
</p>
<div></div>
</body>
ex10-13-start.html
0.00MB
▶ stop( ) 메소드
<script>
$(document).ready(function () {
$("#btn1").click(function () {
$("div").animate({ width: "300px" }, 3000);
$("div").animate({ height: "300px" }, 3000);
});
$("#btn2").click(function () {
$("div").stop();
});
});
</script>
<style>
div {
background-color: pink;
width: 100px;
height: 100px;
position: absolute;
}
</style>
</head>
<body>
<p>
<button id="btn1">Animation</button>
<button id="btn2">Stop</button>
</p>
<div></div>
</body>
'♥ 코딩(Coding) > 제이쿼리(jQuery)' 카테고리의 다른 글
| 제이쿼리 기초와 셀렉터 (0) | 2022.08.22 |
|---|---|
| ( 공부복습 ) 제이쿼리 위젯 (0) | 2022.04.13 |
| ( 공부복습 ) 제이쿼리 효과 (0) | 2022.04.13 |
| ( 공부복습 ) 이벤트 (0) | 2022.04.13 |
| ( 공부복습 ) 스타일, 위치 관련 메서드 (0) | 2022.04.12 |
