고정 헤더 영역
상세 컨텐츠
본문
요소의 크기, 투명도, 경계선, 위치 등 애니메이션 효과를 줄 수 있다.
animate() 선택된 요소에 애니메이션 효과를 줌 (position을 주어야만 사용 가능)
$("선택자").animate({스타일},실행_시간)
left, right, top, bottom, width, height, margin, padding 등이 있으며, 시간은 ms 단위를 사용 default는 400값을 갖는다.
stop() 선택된 요소에서 진행 중인 애니메이션을 멈춤
animate()
<script>
$(function() {
$("#btn1").click(function() {
$("div").animate({left:"300px"}, 3000);
// 좌측으로부터 300px 멀어지는데 3초 동안 이동.
});
$("#btn2").click(function() {
$("div").animate({left:"0"});
// 좌측에서 0px로 바로 이동.
});
});
</script>
<style>
div {width:100px; heigth:100px; position:relative;}
</style>
<body>
<button id="btn1">animate()</button>
<button id="btn2">animate()_0</button>
<div style="background-color:yellow;">어려울 때 친구가 진정한 친구이다.</div>
</body>
<script>
$(function() {
$("#btn1").click(function() {
$("div").animate({left:"300px",height:"200px",width:"200px"},3000);
// 좌측으로부터 300px 멀어지는데, 3초동안 이동
$("div").css("background-color","blue");
});
});
</script>
<style>
div {width:100px; height:100px; position:relative;}
</style>
</head>
<body>
<button id="btn1">animation effects</button>
<button id="btn2">reset</button>
<div style="background-color:yellow;">어려울 때, 친구가 진정한 친구이다.</div>
</body>
<script>
$(function() {
$("#btn1").click(functioin() {
$("div").animate({width:"200px"},3000);
$("div").animate({height:"200px"},3000);
});
$("#btn2").click(functioin() {
$("div").stop();
// animate()가 움직이며, 처음에 width가 움직이다가 stop()을 활성화 시키면 멈추고 height가 늘어난다.
// 또 누르면 모든 기능이 멈추게 되며 다시 btn1을 누르면 width부터 움직인다.
});
});
</script>
<style>
div {width:100px; height:100px; position:absolute;}
</style>
</head>
<body>
<button id="btn1">animation effects</button>
<button id="btn2">stop</button>
<p>
<div style="background-color:yellow;">어려울 때, 친구가 진정한 친구이다.</div>
</p>
</body>
기차 사진은 왼쪽에서 오른쪽으로 500px 움직이며,
상어 사진이 커지며 마지막에 이미지 바뀜
<script>
$(function() {
$("#btn1").click(function() {
$("#train img").animate({left:"500px"}, 3000);
});
$("#btn2").click(function() {
$("#shark img").animate({width:"300px", height:"300px"},1000 , function() {
$("#shark img").attr("src","shark.jpg");
});
});
});
</script>
<style>
img, div {width:100px; height:100px; position:absolute;}
</style>
</head>
<body>
<button id="btn1">기차</button>
<button id="btn2">상어</button>
<div id="shark"><img src="shark_1.jpg"></div>
</body>
