티스토리 뷰


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

댓글
댓글쓰기 폼