티스토리 뷰
.slideDown() 은 매칭되는 요소에 대해서 슬라이드 모션으로 나타낸다.
.slideUp() 은 매칭되는 요소에 대해서 슬라이드 모션으로 감춘다.
문법
.slideDown( [ duration ], [ callback ] ) → version 1.0 이후
.slideDown( [ duration ], [
easing ], [ callback ] ) → version 1.4.3 이후
.slideUp( [ duration ], [ callback ] ) → version 1.0 이후
.slideUp( [ duration ], [ easing ],
[ callback ] ) → version 1.4.3 이후
duration : 문자나 숫자로 애니메이션이 얼마나 실행할 것인지 결정한다.
문자는 fast, slow 형태가 있고 밀리초로 따지면 200, 600 밀리초로 나타낼 수 있으며 매개변수값이
없거나 다른문자가 들어가면 디폴트 400 밀리초를 사용한다.
callback : 애니메이션이 완료되면 호출되는 함수
사용예
slideDown()
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#de9a44; margin:3px; width:80px;
height:40px; display:none; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
Click me!
<div></div>
<div></div>
<div></div>
<script>
$(document.body).click(function () {
if ($("div:first").is(":hidden")) {
$("div").slideDown("slow");
} else {
$("div").hide();
}
});
</script>
</body>
</html>
slideUp()
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#3d9a44; margin:3px; width:80px;
height:40px; float:left; }
</style>
<script src="http://code.jquery.com/jquery-1.4.4.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>'jQuery' 카테고리의 다른 글
| :has() Selector (0) | 2011.01.06 |
|---|---|
| ID Selector (“#id”) 와 Class Selector (“.class”) (0) | 2011.01.06 |
| Child Selector (“parent > child”) (0) | 2011.01.06 |
| :first-child Selector (0) | 2011.01.06 |
| :eq() Selector (0) | 2011.01.06 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크