jQuery :SlideUp, SlideDown을 되돌리는 방법, 예제, 구현

jQuery :SlideUp, SlideDown을 되돌리는 방법, 예제, 구현

 

기본적으로 jQuery slideDown은 분명히 요소를 아래로 밀어 내용을 표시하고 slideUp은 요소를 위로 밀어 내용을 숨깁니다. 

slideUp을 사용하여 내용을 표시하고 slideDown을 사용하여 내용을 숨겨서 이러한 동작을 취소하려면 어떻게해야 할까요?

Query UI 슬라이드 함수를 사용하여 메소드의 방향을 직접 변경할 수 있지만 jQuery 라이브러리를 사용하여 jQuery UI 라이브러리를 로드하여 애플리케이션에 가중치를 더해야합니다.

예를 들어 아래와 비슷한 코드를 사용할 수 있습니다.

$('button').click(function () {
      $(this).hide('slide', { direction: "down" }, 1000);
});

 

다른 옵션은 애니메이션 기능을 사용하여 슬라이드 업하려는 요소의 높이와 여백을 변경하여 직접 무언가를 만드는 것입니다. 다른 옵션은 CSS를 사용하여 slideDown 및 slideUp의 동작을 취소하는 것입니다. 

 

 

 

동작 원리

먼저 slideDown 및 slideUp을 올바르게 사용하여 내용을 표시하는 두 개의 버튼을 사용하여 작은 테스트 단위를 만들 수 있습니다.

<div id="normal">
  <button id="slideContentDown">Slide Down</button>
  <button id="slideContentUp">Slide Up</button>
  <div class="slide slideDown">
    Look this content slides down using the slideDown method.
  </div>
</div>

 

 

다음으로 동일한 두 개의 버튼과 slideDown 메서드와 slideUp 메서드를 사용하는 다른 콘텐츠 영역을 만들지 만 반대의 작업을 수행하도록 메서드를 반전시킵니다.

<div id="reverse">
  <button id="reverseSlideContentDown">Reverse Slide Down</button>
  <button id="reverseSlideContentUp">Reverse Slide Up</button>
  <div class="slide slideUp">
    This content slides up using the slideDown method.
  </div>
</div>

 

 

이러한 시나리오를 만들면 슬라이드 방법을 버튼에 추가 할 수 있습니다.

$('#slideContentDown').on('click', function()
{
  $('.slideDown').slideDown();
});

$('#slideContentUp').on('click', function()
{
  $('.slideDown').slideUp();
});

$('#reverseSlideContentDown').on('click', function()
{
  $('.slideUp').slideDown();
});

$('#reverseSlideContentUp').on('click', function()
{
  $('.slideUp').slideUp();
});

 

 

아래 CSS를 사용하여 내용을 표시하도록 페이지의 스타일을 지정할 수 있습니다.

@import 'https://fonts.googleapis.com/css?family=Lato';

body
{
  background: #3498db;
  color: #FFF;
  font-family: 'Lato', sans-serif;
  font-size: 150%;
}

button
{
  border: 2px solid #FFF;
  background: transparent;
  color: #FFF;
  cursor: pointer;
  font-size: 2rem;
  padding: 1rem 8rem;
  transition: background 0.4s;
  margin: 1rem 0;
}

button:hover
{
  background: #2980b9;
}

.slide
{
  background: #5ABEFF;
  padding: 4rem;
  margin: 1rem 0;
  display: none;
  width: 100%;
}

 

 

아래는 함수를 반전시키는 데 필요한 코드이며 중요한 속성은 position: absoulte;와 bottom:0 입니다.  jQuery는 이 요소의 맨 아래가 0임을 알고 있으므로 아래로 이동할 수 없으므로 기능이 반전되고 jQuery가 element를 위로 슬라이드하여 내용을 표시합니다.

#reverse
{
  padding-bottom: 10rem;
  position: relative;
}

.slideUp
{
  position: absolute;
  bottom: 0;
}