이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 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 입문
'프로그래밍 > Jquery' 카테고리의 다른 글
| jquery - Jquery UI Effect 플러그인 사용법 (0) | 2014.11.02 |
|---|---|
| jquery - delay 메소드를 이용한 애니메이션 지연 방법 (0) | 2014.11.02 |
| jquery - stop 메소드를 이용한 애니메이션 정지하기 (0) | 2014.10.27 |
| jquery - 애니메이션 큐 및 큐를 clear 하는 방법 (0) | 2014.10.27 |
| jquery - hover 메소드와 animate 메소드를 이용한 마우스 오버 애니메이션 효과 만들기 (0) | 2014.10.27 |
| jquery - innerfade 플러그인을 이용한 사진 변경 효과 적용하기 (0) | 2014.10.27 |
| jquery - toggle 메소드를 이용한 시각효과 만들기 (0) | 2014.10.20 |
| jquery - 입력양식 이벤트를 이용한 한번에 모든 체크박스를 체크하기 (2) | 2014.10.18 |