메뉴 건너뛰기

검색창 닫기

HEUKMYO

program1

140808_[jquery] fadeout

2014.09.23 16:41 read.266

.fadeOut();

선택한 요소를 서서히 사라지게 합니다.


.fadeOut(duration, easing, complete)
duration : 완전히 사라질 때까지의 시간 (fast, slow 혹은 1000분(1초), fast는 200, slow는 600, 기본값 400)
.fadeOut("slow")
.fadeOut(600)
easing : 사라지는 모양(swing, linear)
.fadeOut("linear")
complete : 사라진 다음 불러올 함수
.fadeOut(function(){
    //Function
});
.fadeIn();
예제1
jq_fadeout_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">
			#i1{position: absolute;left:0;top:0}
			#i2{position: absolute;left:180px;top:0}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$("#a").click(function(){
					$("img").fadeOut();
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div><img src="images/img_01.jpg" alt="" /></div>
		<button id="a">OK</button>
	</body>
</html>



예제2


jq_fadeout_2.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">
			#i1{position: absolute;left:0;top:0}
			#i2{position: absolute;left:180px;top:0}
		</style>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
		//<![CDATA[
			$(document).ready(function(){
				$("#a").click(function(){
					$("img").fadeOut(1000);
				});
			});
		//]]>
		</script>
	</head>
	<body>
		<div><img src="images/img_01.jpg" alt="" /></div>
		<button id="a">OK</button>
	</body>
</html>

, ,

추가메뉴 목록
위로