효과란?
- 자바스크립트와 CSS를 이용해서 HTML엘리먼트에 동적인(애니메이션)효과를 줄 수 있다.
- jQuery의 효과 메소드를 호출하는 것만으로 간단히 효과를 줄 수 있다.
예제1.
<!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> //버튼들은 각각 id값을 가지고 있음
<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); //e.target:이벤트가 발생하는 엘리먼트를 반환한 것을 랩퍼로 감싸서 this에 전달
switch($this.attr('id')) {//주어진 엘리먼트에 속성중 id값을 가져옴
case 'fadeout':
$('#target').fadeOut('slow');//id값이 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')});
//1000(ms) = 1초
break;
}
})
</script>
</body>
</html>
예제2.
<!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() { //id:go
$("#block").animate({
width: "300px",
opacity: 0.4,
marginLeft: "50px",
fontSize: "30px",
borderWidth: "10px"
}, 3000);//3000ms=3s
});</script>
</body>
</html>
'__ > jQuery' 카테고리의 다른 글
| [생활코딩] 11강. ajax (0) | 2021.02.19 |
|---|---|
| [생활코딩] 9강. 탐색(traversing) (0) | 2021.02.19 |
| [생활코딩] 8강. Form (0) | 2021.01.24 |
| [생활코딩] 7강. 엘리먼트 제어 (0) | 2021.01.24 |
| [생활코딩] 6강. Event (0) | 2021.01.24 |