반응형
이번 편에서는 jQeury 애니메이션 효과를 이용하여 웹페이지를 보다 동적으로 보여주는 기법에 대해 알아볼 것이다.
효과란?
- JavaScript와 CSS를 이용해서 HTML element에 동적인 효과를 줄 수 있다.
- jQuery의 효과 method를 호출하는 것만으로 간단히 효과를 줄 수 있다.
1) fadeout, fadein, hide, show, slidedown, slideup, mix 예제
<!DOCTYPE html>
<html>
<head>
<style> span {
color:red;
cursor:pointer;
}
div {
margin:3px;
width:80px;
height:80px;
}
div {
background:#f00;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<input type="button" id="fadeout" value="fade out" />
<input type="button" id="fadein" value="fade in" />
<input type="button" id="hide" value="hide" />
<input type="button" id="show" value="show" />
<input type="button" id="slidedown" value="slide down" />
<input type="button" id="slideup" value="slide up" />
<input type="button" id="mix" value="mix" />
<div id="target">
target
</div>
<script>$('input[type="button"]').click( function(e) {
var $this = $(e.target);
switch($this.attr('id')) {
case 'fadeout':
$('#target').fadeOut('slow');
break;
case 'fadein':
$('#target').fadeIn('slow');
break;
case 'hide':
$('#target').hide();
break;
case 'show':
$('#target').show();
break;
case 'slidedown':
$('#target').hide().slideDown('slow');
break;
case 'slideup':
$('#target').slideUp('slow');
break;
case 'mix':
$('#target').fadeOut('slow').fadeIn('slow').delay(1000).slideUp().slideDown('slow', function(){alert('end')});
break;
}
})
</script>
</body>
</html>- e.target 은 event가 발생한 element를 받아낸다. 이것을 wrapper $로 감싸서 this에다가 저장한다.
- →fadeout을 클릭하면 이 element에 대한 object값을 전달 한다
- 그 뒤에는 swtich 문이 나온다. $this.attr('id)가 나오는데 주어진 element <input~ /> 의 속성 중에 id에 해당되는 속성의 값을 가져오라는 뜻 = fadeout
- 그럼 fadeout에 해당되는 case에 이 switch문이 멈추면서 아래 코드가 실행이 된다.
- .fadeOut(xx) 이 xx에서 속도조정이 가능하다
- delay(1000) 1000이면 1초간 정지를 의미한다.
- 맨 아래 slow 옆은 익명함수이다.
- 이들은 자주 사용되는 기능인데 편리하지만 자유도가 떨어진다.
2) animiate 예제
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button id="go">
» Run
</button>
<div id="block">
Hello!
</div>
<script>/* Using multiple unit types within one animation. */
$("#go").click( function() {
$("#block").animate({
width: "300px",
opacity: 0.4,
marginLeft: "50px",
fontSize: "30px",
borderWidth: "10px"
}, 3000);
});</script>
</body>
</html>- 위의 예제와 달리, 디테일하게 애니메이션 효과를 제어할 수 있다
- <button>은 id값이 go 인 버튼이다
- 애니메이션의 대상이되는 div
- #go를 클릭했을 때 이 evnethandler를 실행한다
- #block 에다가 element라는 method를 실행한다
- animate method에 첫 번째 인자로 전달되는 width같은 property는 최종적으로 어떤 모습을 하고 있어야 하는 가를 말해준다
- 맨 위의 css를 보면 div에 기본 디자인이 있다. 이것을 animate 하면 시간의 순서대로, 순차적으로 보여주게 된다.
- 디자인이 전달된 수치들에 해당되는 디자인으로 바꾸게 되는 것이 animate의 핵심이다
- 3000은 animation 효과가 3초안에 끝난다는 뜻으로, 단위는 밀리 세크이며1/1000초 이다
이전글 보고오기
반응형
'[자기계발] > 유튜브로 코딩배우기' 카테고리의 다른 글
| [드림코딩 엘리] 자바스크립트 최신 ES6강의! 데이터타입, var 보다는 let을 쓰기, hoisting이란? 타입스크립트란? (0) | 2021.07.23 |
|---|---|
| [생활코딩] jQuery ajax란? (2) | 2021.07.10 |
| [생활코딩] jQuery 탐색(traversing)이란? (0) | 2021.07.04 |
| [생활코딩] jQuery 폼(form) 이란? (0) | 2021.06.27 |
| [생활코딩] jQuery를 이용해서 HTML element 제어하는 방법 (0) | 2021.06.13 |
