| 06.Stop.htm |
|
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<title>애니메이션 효과 멈추기</title>
<style type="text/css">
div
{
position:absolute; background-color:#abc; left:0px; top:50px;
width:60px; height:60px; margin:5px;
}
</style>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{ //Start
animation $("#go").click(function() { $(".block").animate({
left: '+=100px' }, 2000); }); //Stop
animation when button is clicked $("#stop").click(function() { $(".block").stop(); }); //Start
animation in the opposite direction $("#back").click(function() { $(".block").animate({
left: '-=100px' }, 2000); }) //대각선 (연습) $("#Button1").click(function() { $(".block").animate({
left: '-=100px', top:'-=100px' }, 2000); })
});
</script> </head> <body>
<button id="go">Go</button>
<button id="stop">Stop</button>
<button id="back">Back</button>
<button id="Button1">대각선</button>
<div class="block"></div> </body> </html> |
| 결과확인 |
[그림53-1] |
06.Stop.htm'jQuery | javascript | CSS' 카테고리의 다른 글
| 54.jQuery - 트리뷰 컨트롤 ( 13.Sample ) (0) | 2009.11.12 |
|---|---|
| -- 현재 까지의 jQuery 소스6 -- (0) | 2009.11.12 |
| 52.jQuery - animate 메서드로 다중 효과 구현 ( 08.Effects ) (0) | 2009.11.12 |
| 51.jQuery - slideToggle()로 지정된 영역 보이고 안보이게 하기 ( 08.Effects ) (0) | 2009.11.12 |
| 50.jQuery - slideUp()으로 위로 올려서 숨기기 ( 08.Effects ) (0) | 2009.11.12 |
Comments