slideDown , slideUp , fadeIn, fadeOut

slideDown ?
대상 element의 style 속성 값이 "display：none" 일때 위에서 아래로 speed의종류에 따라 보여진다.
$(element).slideDown("speed의종류");

slideUp ?
대상 element의 style 속성 값이 "display:block" 일때 출력되고있는 위치에서 위로 speed의 종류에 따라 사라진다.
$(element).slideUp("speed의종류");

speed 종류
"fast", "normal", "slow"

※참고※ element를 불러(?) 사용 할 경우 element 그대로 부른다면 "element" 이와 같은 방식으로 사용하고
element의 id를 지정했다면 id를 불러 사용 할 경우에는 ""없이 id를 불러 사용한다.
element 그래도 사용: $("id").slideDown("speed의종류");
element에 id를 사용: $(element).slideDown("speed의종류");

fadeIn ?
대상 element의 style 속성 값이 "display：none" 일때 불투명도가 높아지며 보여진다.
높은 수치는 빠른게 아니라 점점 느리게 나타낸다.
$(element).fadeIn(수치,function(){
$(element).fadeIn(수치 or speed의종류);
}

fadeOut ?
대상 element의 style 속성 값이 "display：none" 일때 불투명도가 낮아지며 사라진다.
$(element).fadeOut(수치 or speed의종류);

▶ 출력결과

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>

p { width:400px; display:none;}

</style>
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>

<TITLE> New Document </TITLE>

<BODY>

<button id="b1">slideDown</button>
<button id="b2">slideUp</button>
<button id="b3">fadeIn</button>
<button id="b4">fadeOut</button>

<p id="p1"> Only I can change my life. No one can do it for me.<br/>
Well begun is <em>half</em> done.</p>

<p id="p2">Lovely Drinking<br/>
Chocolate Drinking.</p>

$(b2).click(function ()
{
$(p1).slideUp("slow");
}
);

$(b3).click(function ()
{
$(p1).fadeIn(3000,function(){
$(p2).fadeIn(100);
}
);
return false;
});

$(b4).click(function ()
{
$(p1).fadeOut("slow");
}
);
</script>

</BODY>
</HTML>

저작자표시 비영리 동일조건

'JavaScript & jQuery' 카테고리의 다른 글

테이블 행 펼치고 접기 (0)	2011.09.19
jquery 오늘하루 보이지 않음 (0)	2011.09.09
클라이언트 시간구하기(자바스크립트) (0)	2011.09.01
jquery .hover (마우스오버와 마우스아웃) (0)	2011.07.26
자바스크립트 주민등록번호 (0)	2011.07.22