메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140808_[jquery] slideUp/slideDown

2014.09.23 17:41 read.273

.slideUp();

.slideUp(duration, complete);

매치되는 요소의 높이값이 0이 될때까지 슬라이딩 효과를 준 다음 display:none으로 변경한다.

$("#object").slideUp();

$("#object").slideUp(500);

$("#object").slideUp("slow", function(){});


.slideDown();

.slideDown(duration, complete);

높이값을 0에서 해당요소의 원래 높이만큼 슬라이딩 효과를 준다.

$("#object").slideDown();

$("#object").slideDown(500);

$("#object").slideDown("slow", function(){});


예제1

jq_slide_1.gif 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
	<head>
		<meta http-equiv="content-type" content="text/html;charset=utf-8" />
		<title> new document </title>
		<style type="text/css">
		</style>
		<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
		<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$("#a").click(function(){
					$("div").slideUp();
				});
				$("#b").click(function(){
					$("div").slideDown();
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div><img src="images/img_01.jpg" alt="" /></div>
		<button id="a">hide</button>
		<button id="b">show</button>
	</body>
</html>


추가메뉴 목록
위로