티스토리 뷰

java,web study/7주차 (8월 12일~8월 18일)

JQuery - 이미지 애니메이션(스탑버튼)

doublemetal 2013. 8. 12. 16:25


<!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>


Animation Basic

'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
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함