<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
<title> jquery </title>
<style>
div{
position:absolute;
background-color:#abc;
left:0px;
top:50px;
width:60px;
height:60px;
margin:5px;
}
</style>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script>
$(document).ready(function (){
//Start animation
$('#go').click(function(){
$('.block').animate({left: '+=100px', top: '+=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', top: '-=100px'}, 2000);
});
});
</script>
</head>
<body>
<button id="go">Go</button>
<button id="stop">Stop</button>
<button id="back">Back</button>
<div class="block"></div>
</body>
</html>
'강좌 > jQuery' 카테고리의 다른 글
| jQuery Ajax관련 API 및 getJSON (0) | 2013.04.23 |
|---|---|
| 제이쿼리(jQuery) - 트리구조 만들기 (0) | 2013.04.23 |
| jQuery효과 관련 API (0) | 2013.04.23 |
| 제이쿼리(jQuery) - API(동적으로 다른 이벤트 호출) 와 live, delegate함수 비교 (0) | 2013.04.23 |
| 제이쿼리(jQuery) - CSS관련 API (0) | 2013.04.23 |
