slideUp
원문 링크 
http://api.jquery.com/slideUp/
개요 : 슬라이드를 이용해 요소를 숨깁니다.
- .slideUp( duration [, callback] )
- duration 시간 값
- callback 콜백 함수
- .slideUp( [duration] [, easing] [, callback] )
- duration 시간 값
- easing 특수한 효과 함수
- callback 콜백 함수
.slideUp() 함수는 요소의 height 값을 조작해서 움직임을 만들어 냅니다. 보이게 처리할 때 display 속성값을 jQuery 의 데이터 캐쉬에 저장 해두었다가 나중에 display 를 초기값으로 복원해줍니다. 만일 요소의 display 스타일 속성값이 inline 이었다면, display 속성값이 inline 으로 복원된다는 의미입니다.
시간값(Duration)의 기본값은 밀리세컨드이고, 값이 크면 느린 효과가 나타납니다. 물론 반대는 빨라지겠죠. 'fast' 와 'slow' 문자열을 지원하는데, 각각은 200 과 600 밀리세컨드를 의미합니다.
이미지를 예로 보겠습니다.
<div id="clickme"> Click here </div> <img id="book" src="book.png" alt="" width="100" height="123" />
$('#clickme').click(function() {
$('#book').slideUp('slow', function() {
// Animation complete.
});
});
시작과 끝 효과 ( Easing )
.animate() 인자 중에 남은 하나는 속도 늦추는 함수(easing function)에 대한 내용입니다. 이 easing 함수는 속도에 대한 내용입니다. 움직임이 한쪽 끝에 닿았을때 처리되는 행동패턴에 대한 내용입니다. jQuery에서 easing 은 기본으로 swing 을 사용합니다. swing은 끝점에 가서 속도가 살짝 느려집니다. 또 하나는 속도를 그대로 유지하는 linear 입니다. easing 함수들을 정상적으로 사용하려면 plug-ins 들이 필요합니다. 대부분 jQuery UI suite 쪽에 정의되어 있습니다.
콜백 함수 ( Callback Function )
애니메이션이 완료된 후 사용될 콜백함수입니다. 이 콜백함수는 인자를 전달할 수 없지만, this 를 이용하여 애니메이션이 일어난 요소 자체를 전달할 수는 있습니다. 만일 여러개의 요소에 움직임 효과를 주었다면 각각의 애니메이션 효과가 일어난 뒤에 개별적으로 콜백함수가 실행이 됩니다.
jQuery 1.6 버전부터는, deferred.done() 와 함께 .promise() 함수를 사용하여 모든 움직임이 끝난 후 한번만 콜백함수를 실행할 수 있게 되었습니다. ( .promise() 함수 예제 링크 ).
.slideUp() 을 포함하여 모든 jQuery effect 들은, 글로벌 세팅인 jQuery.fx.off = true로 조절할 수 있습니다. 더 많은 정보를 원하시면 jQuery.fx.off를 참고하십시오.
예 제
모든 div 태그를 슬라이드 업 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#3d9a44; margin:3px; width:80px;
height:40px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").show("slow");
} else {
$("div").slideUp();
}
});
</script>
</body>
</html>미리보기
슬라이드 업 되면서 사라집니다.
예 제
부모 p 태그를 슬라이드 업하고 완료되면 메시지 처리를 합니다.
<!DOCTYPE html>
<html>
<head>
<style>
div { margin:2px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div>
<button>Hide One</button>
<input type="text" value="One" />
</div>
<div>
<button>Hide Two</button>
<input type="text" value="Two" />
</div>
<div>
<button>Hide Three</button>
<input type="text" value="Three" />
</div>
<div id="msg"></div>
<script>
$("button").click(function () {
$(this).parent().slideUp("slow", function () {
$("#msg").text($("button", this).text() + " has completed.");
});
});
</script>
</body>
</html>미리보기
콜백 함수 사용이 핵심이네요.
슬라이드 업은 뭔가를 숨길때 hide 와 자웅(?)을 다툴수 있겠네요. ^^
그럼 즐프하세요.
※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.
'프로그래밍 > jQuery' 카테고리의 다른 글
| ajaxComplete() Ajax가 완료되면 호출 (4) | 2012.06.15 |
|---|---|
| jQuery.ajax() HTTP 비동기 데이터 교환 (0) | 2012.06.12 |
| toggle(), 요소 표시 또는 숨기기, 토글하기 (0) | 2012.05.08 |
| jQuery .stop(), 애니메이션 효과 멈춤 (0) | 2012.05.08 |
| slideToggle(), 슬라이드 토글하기 (1) | 2012.04.25 |
| slideDown(), 슬라이드 효과로 보이기 (0) | 2012.04.25 |
| show(), 요소 보이게 하기 (0) | 2012.04.25 |
| queue(), 대기열의 함수와 대기열 조작하기 (0) | 2012.04.25 |