프로그래밍/Jquery

jquery - animate 메소드를 이용한 동적으로 스타일 변화시키기

가카리 2014. 10. 27. 21:06
반응형

이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 animate 메소드


를 사용해 동적으로 애니메이션을 적용하는 예제입니다.


간단하므로 소스코드를 바로 보시면 이해가 되실겁니다.


소스코드

<!DOCTYPE html>

<html>

<head>

        <style>

        div{

        width: 50px; height: 50px;

        background-color: orange;

        }

        </style>

    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>

        <script>

        $(document).ready(function (){

        $('div').click(function(){

        

        //변수를 선언합니다.

        var width = $(this).css('width');

        var height = $(this).css('height');

        

        //animate 메소드를 사용합니다.

        // 클릭시 다음 animate 메소드 효과가 적용됩니다.

        $(this).animate({

        width: parseInt(width) + 50,

        height: parseInt(height) + 50

        }, 'slow');

        

        });

        });//ready메소드

        

    </script>

</head>

<body>

        <div></div>

</body>

</html>


출력화면

마우스로 네모를 클릭하면 커집니다. 아래와 같은 작은 네모가

클릭을하면 아래와 같이 커집니다.



출처 : 모던웹을 위한 javascript jquery 입문







반응형