티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<title>Animation Basic</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function () {
// 변수를 선언합니다.
var clearQueue = false;
var goToEnd = false;
// 이벤트를 연결합니다.
$('#clearQueue').change(function () {
clearQueue = $(this).prop('checked')
});
$('#goToEnd').change(function () {
goToEnd = $(this).prop('checked');
});
//prop을 이용하여 값을 얻어옴
$('#stopButton').click(function () {
$('#box').stop(clearQueue, goToEnd);
});
//스톱버튼이 클릭이 되면(이벤트발생) 스탑 메소드가 실행됨
// 스타일을 변경합니다.
$('#box').css({
width: 100,
height: 100,
background: '#5CD1E5'
})
// 타이머를 연결합니다.
setInterval(function () {
$('#box').animate({
width: 500,
height:100
}, 300).animate({
width: 100,
height: 300
}, 300);
}, 300);
});
</script>
</head>
<body>
<!-- 입력 양식 -->
<label>clearQueue</label>
<input id="clearQueue" type="checkbox" />
<br />
<label>goToEnd</label>
<input id="goToEnd" type="checkbox" />
<br />
<button id="stopButton">Stop</button>
<!-- 애니메이션 -->
<div id="box"></div>
</body>
</html>
'java,web study > 7주차 (8월 12일~8월 18일)' 카테고리의 다른 글
| CSS/JQuery - 툴팁 페이드인/페이드아웃 해보기 (0) | 2013.08.13 |
|---|---|
| JQuery - 움직이는 애니메이션 그리기 (0) | 2013.08.12 |
| JQuery - 이벤트 실행방지하기 (0) | 2013.08.12 |
| JQuery - 키코드 알아내기 (0) | 2013.08.12 |
| 8월 12일 실습코드 (0) | 2013.08.12 |
댓글