작성일 : 11-11-30 17:17
|
[JQuery] (JQuery Source) hide , show , fadeIn , fadeOut , slideUp , slideToggle , animate
|
 |
|
글쓴이 :
조형래
 조회 : 4,189
|
<title>보이기 및 숨기기</title>
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".region").show();
$("#moreRegion").hide();
$("span.more").click(function () {
// 3000 : 3초, 'slow', 'normal', 'fast'
$("#moreRegion").show('slow'); // 천천히 보이기
$(this).hide('fast'); // more 버튼 숨기기
});
});
</script>
<div class="region" style="display:none;">
안녕하세요. 여기는 본문입니다.
<span class="more">more...</span>
</div>
<div id="moreRegion" style="height:100px;background-color:Yellow;">
또 만나요
</div>
<title>서서히 보이기 및 숨기기</title>
<style type="text/css">
div { background-color:Silver; height:100px; }
</style>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$("#first").fadeIn('slow'); // 서서히 나타나기
$('#second').fadeOut('fast'); // 빠르게 감추기
});
});
</script>
<input type="button" id="btn" value="페이드 효과 주기" />
<div id="first" style="display:none;background-color:Yellow;">첫번째 영역</div>
<div id="second">두번째 영역</div>
<title>슬라이드업</title>
<script type="text/javascript">
$(document).ready(function () {
$("#btn").click(function () {
$("#first")
.fadeIn('slow') // 서서히 보이기
.slideUp(3000); // 슬라이드업 : 숨기기
});
});
</script>
<input type="button" id="btn" value="슬라이드 업" />
<div id="first" style="display:none;background-color:Yellow;height:100px;">첫번째 영역</div>
<div id="second">두번째 영역</div>
<title>슬라이드 업/다운</title>
<script type="text/javascript">
$(document).ready(function () {
$("#btn10").click(function () {
//[!] 숨김->보임->숨김
$("#first10").slideToggle('slow');
});
});
</script>
<input type="button" id="btn10" value="슬라이드 토글" />
<div id="first10" style="display:none;background-color:Yellow;height:100px;">첫번째 영역</div>
|
|
893
