애니메이션 효과와 관련된 jQuery 함수
slideUp함수
형식) .slideUp( [duration ] [, complete ] )
slideDown함수
형식) .slideDown( [duration ] [, complete ] )
slideToggle함수
형식) .slideToggle( [duration ] [, complete ] )
요소를 슬라이딩모션을 사용하여 보이게/보이지 않게 설정한다
*유지시간은 초(숫자)나 slow/fast(문자열)로 줄 수 있다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<title>jQuery 커튼효과</title>
<style>
div {
background:black;
margin:5px;
width:50px; height:30px;
float:left; /*왼쪽부터 배치*/
}
</style>
<script>
$(function(){
$('#slideUp').click(function(){
$('div').slideUp()
})
$('#slideDown').click(function(){
$('div').slideDown(5000)
})
$('#slideToggle').click(function(){
$('div').slideToggle("fast")
})
})
</script>
</head>
<body>
<button id="slideUp">slideUp</button>
<button id="slideDown">slideDown</button>
<button id="slideToggle">slideToggle</button>
<br>
<div></div><div></div><div></div>
</body>
</html>fadeIn함수
형식) .fadeIn( [duration ] [, complete ] )
fadeOut함수
형식) .fadeOut( [duration ] [, complete ] )
fadeToggle함수
형식) .fadeToggle( [duration ] [, easing ] [, complete ] )
fadeTo함수
형식) .fadeTo(duration, opacity [, complete ] )
선택자에 해당하는 element를 암전효과처럼 점점 보이지 않게, 혹은 보이게 설정한다.
fadeToggle의 경우, 한번은 fadeIn을, 다음 한번은 fadeOut, 번갈아 가며 실행된다.
duration은 Number(밀리세컨드 단위) 혹은 String(fast,normal,slow) 타입이다.
opacity는 투명도로 0일때 보이지 않게, 1일때 보이게 설정된다.
complete에는 함수가 들어가는데, 이 애니메이션 효과가 완료됐을때 호출할 함수를 지정해준다.
'jQuery' 카테고리의 다른 글
| [jQuery] on함수, web sql database (0) | 2021.03.22 |
|---|---|
| [jQuery_mobile] data-role( page, header, content, footer ) (0) | 2021.03.18 |
| [jQuery]wrap, show, hide 함수 / change, focus, blur, submit 이벤트 (0) | 2021.03.09 |
| [jQuery]romove, empty, one, unbind, hover 함수/ keyup이벤트 (0) | 2021.03.09 |
| [jQuery]bind함수, 태그에 이벤트 연결하기 (0) | 2021.03.08 |