[jQuery] div 숨기기, 보이기, 토글하기

 

 

 jQuery의 메소드를 사용하여,

div 요소를 숨기거나 보여줄 수 있고,

토글처리(숨겼다 보였다 반복) 할 수 있습니다.

 

1. show(), hide(), toggle()

2. slideDown(), slideUp(), slideToggle()

3. 천천히 숨기기, 보이기, 토글하기

 

 

1. show(), hide(), toggle()

• show() : 요소를 보여줍니다.
• hide() : 요소를 숨깁니다.
• toggle() : 실행 할 때마다, 요소 숨김/보여줌을 반복합니다.

<div id='my-div'></div>
<button id='show-btn'>보이기</button>
<button id='hide-btn'>숨기기</button>
<button id='toggle-btn'>토글</button>

 

#my-div {
  width: 100px;
  height: 100px;
  background-color: purple;
  margin: 5px;
}

// 보이기
$('#show-btn').click(function() {
  $('#my-div').show();
})

// 숨기기
$('#hide-btn').click(function() {
  $('#my-div').hide();
})

// 토글(toggle) 
$('#toggle-btn').click(function() {
  $('#my-div').toggle();
})

 

 

2. slideDown(), slideUp(), slideToggle()

• slideDown() : 슬라이딩 효과를 주며, 요소를 보여줍니다.
• slideUp() : 슬라이딩 효과를 주며, 요소를 숨깁니다.
• slideToggle() : 실행 할 때마다, 슬라이딩 효과를 주며 요소 숨김/보여줌을 반복합니다. 

<div id='my-div'></div>
<button id='show-btn'>보이기</button>
<button id='hide-btn'>숨기기</button>
<button id='toggle-btn'>토글</button>

#my-div {
  width: 100px;
  height: 100px;
  background-color: purple;
  margin: 5px;
}

// 보이기 (slide 효과)
$('#show-btn').click(function() {
  $('#my-div').slideDown();
})

// 숨기기 (slide 효과)
$('#hide-btn').click(function() {
  $('#my-div').slideUp();
})

// 토글(toggle) (slide 효과)
$('#toggle-btn').click(function() {
  $('#my-div').slideToggle();
})

 

 

3. 천천히 숨기기, 보이기, 토글 하기 

앞에서 소개한 모든 함수

show(), hide(), toggle(), slideDown(), slideUp(), slideToggle()에

파라미터를 전달하여

요소가 애니메이션 되는 시간을 지정할 수 있습니다.

 

<div id='my-div'></div>
<button id='toggle-btn'>토글</button>
<button id='slide-toggle-btn'>슬라이드 토글</button>
<div id='my-message'></div>

#my-div {
  width: 100px;
  height: 100px;
  background-color: purple;
  margin: 5px;
}

// 토글(toggle)
// 3초동안 애니메이션 됨
$('#toggle-btn').click(function() {
  $('#my-div').toggle(3000);
})

// 슬라이드 토글(toggle) (slide 효과)
// 3초동안 애니메이션 됨
$('#slide-toggle-btn').click(function() {
  $('#my-div').slideToggle(3000);
})

.toggle(3000);

.sliceToggle(3000);

위 예제는 toggle(), slideToggle() 함수에

파라미터로 밀리세컨드에 해당하는 시간 3000을 전달하였습니다.

이제, div 요소가 숨거나 보여질 때,

3초 동안 천천히 애니메이션 되게 됩니다.