jQuery 기초 hide() show() 실습
태그를 숨기고 hide() , 보이게하는 show() 함수를 활용해보려고 합니다.
일반적으로 그냥 깜빡사라지고 나타나기도 하고
속도를 지정해 펼쳐지며 사라지고 나타나는 설정도 할수가 있는데요
hide() : 사라지기
hide(1000) : 1초동안 사라지기
show() : 나타나기
hide(300) : 0.3동안 나타나기
사용을 해보며 속도 조절도 설정해서 실습을 해보았습니다.^^
<head>
<title>제목 없음</title>
<style type="text/css">
/* 구분을 위해 스타일 적용하기 */
.box { clear:both; }
.div_class { border:1px solid; margin:10px 0; padding:10px; line-height:24px; } /* div_class는 모두 적용하기 */
.span_class { border:1px solid #ddd; display:inline-block; width:50px;height:50px; background-color:Blue; } /* span_class는 모두 적용하기 */
.span_textblue { color:blue; } /* 텍스트색상 파란색으로 */
.span_textred { color:red; } /* 텍스트색상 빨간색으로 */
#div1_id { float:left; border-color:red;}
#div2_id { float:left; border-color:blue;}
</style>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<!-- jQuery 스터디 -->
<div class="box">
<div id="div1_id" class="div_class">
<span id="span1_id" class="span_class"></span>
<span id="span2_id" class="span_class"></span>
<span id="span3_id" class="span_class"></span>
<span id="span4_id" class="span_class"></span>
<span id="span5_id" class="span_class"></span>
</div>
<div id="div2_id" class="div_class">
<span id="span2_1_id" class="span_class"></span>
<span id="span2_2_id" class="span_class"></span>
<span id="span2_3_id" class="span_class"></span>
<span id="span2_4_id" class="span_class"></span>
<span id="span2_5_id" class="span_class"></span>
</div>
</div>
<div class="box">
<button type="button" onclick="btn1();">숨기기 hide()</button>
<button type="button" onclick="btn2();">보이기 show()</button>
<button type="button" onclick="btn3('fast');">빠르게(최소0.1초)</button>
<button type="button" onclick="btn3('slow');">느리게(최대3초)</button>
</div>
<div class="box">
현재속도 : <span id="span_speed">100</span>
</div>
<script type="text/javascript">
// 위 기본태그를 이용해 여러가지 jQuery 실습을 합니다.
// 속도 변수
var SPEED = 100;
// 숨기기
function btn1() {
jQuery("#div1_id").hide(SPEED);
}
// 보이기
function btn2() {
jQuery("#div1_id").show(SPEED);
}
// 전체문장의 색상을 파란색으로 변경합니다.
function btn3(option) {
SPEED += (option == "fast" ? -100 : 100);
// 3초 초과시 3초고정, 0.1초 미만시 0.1초고정
SPEED = (SPEED > 3000 ? 3000 : (SPEED < 100 ? 100 : SPEED));
jQuery("#span_speed").text(SPEED);
}
</script>
</body>
'jQuery 기초' 카테고리의 다른 글
| jquery closest() (0) | 2017.12.14 |
|---|---|
| jquery click() (0) | 2017.12.13 |
| jquery append() (0) | 2017.12.11 |
| jquery eq() (0) | 2017.12.09 |
| jquery attr() (0) | 2017.12.08 |
댓글