jQuery / Method / .slideUp() - 요소를 위쪽으로 사라지게 하는 메서드

.slideUp()

.slideUp()는 선택한 요소를 위쪽으로 서서히 사라지게 합니다.

문법

.slideUp( [duration ] [, easing ] [, complete ] )

duration

  • 요소가 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다.
  • fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다.

easing

  • 요소가 사라지는 방식을 정합니다.
  • swing과 linear가 가능하며, 기본값은 swing입니다.

complete

요소가 사라진 후 수행할 작업을 정합니다.

예제 1

버튼을 클릭하면 파란색 배경의 div 요소가 위쪽으로 사라집니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .b { height: 100px; background-color: #bbdefb; }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button.a' ).click( function() {
          $( '.b' ).slideUp();
        } );
      } );
    </script>
  </head>
  <body>
    <p><button class="a">Click</button></p>
    <div class="b"></div>
  </body>
</html>

예제 2

사라지는 속도를 비교하는 예제입니다. 왼쪽 요소의 사라지는 시간은 400, 오른쪽 요소는 1200입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .b { height: 500px; background-color: #bbdefb; }
      .c { height: 500px; background-color: #ffcdd2; }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button.a' ).click( function() {
          $( '.b' ).slideUp( 400 );
          $( '.c' ).slideUp( 1200 );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button class="a">Click</button></p>
    <table style="width: 100%; height: 500px;">
      <tr>
        <td style="vertical-align: top;"><div class="b"></div></td>
        <td style="vertical-align: top;"><div class="c"></div></td>
      </tr>
    </table>
  </body>
</html>

예제 3

swing와 linear를 비교하는 예제입니다. easing은 가변  속도이고, linear는 고정 속도입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .b { height: 500px; background-color: #bbdefb; }
      .c { height: 500px; background-color: #ffcdd2; }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button.a' ).click( function() {
          $( '.b' ).slideUp( 2000, 'swing' );
          $( '.c' ).slideUp( 2000, 'linear' );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button class="a">Click</button></p>
    <table style="width: 100%; height: 500px;">
      <tr>
        <td style="vertical-align: top;"><div class="b"></div></td>
        <td style="vertical-align: top;"><div class="c"></div></td>
      </tr>
    </table>
  </body>
</html>

예제 4

div 요소가 사라진 후 Complete라는 문자열을 나타내는 예제입니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <style>
      .b { height: 100px; background-color: #bbdefb; }
      .c { display: none; }
    </style>
    <script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'button.a' ).click( function() {
          $( '.b' ).slideUp( function() {
            $( '.c' ).css( 'display', 'block' );
          } );
        } );
      } );
    </script>
  </head>
  <body>
    <p><button class="a">Click</button></p>
    <div class="b"></div>
    <p class="c">Complete</p>
  </body>
</html>

Related Posts

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

jQuery / Method / .find() - 어떤 요소의 하위 요소 중 특정 요소를 찾는 메서드

.find() .find()는 어떤 요소의 하위 요소 중 특정 요소를 찾을 때 사용합니다. 문법 .find( selector ) 예를 들어 $( 'h1' ).find( 'span' ) 은 h1 요소의 하위 요소 중 span 요소를 선택합니다. 예제 클래스 값으로 b를 갖는 p 요소의 하위 요소 중 클래스 값으로 ip를 갖는 span 요소를 찾아서 글자 크기를 2배로 만듭니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

jQuery / Method / .replaceWith() - 선택한 요소를 다른 것으로 바꾸는 메서드

.replaceWith() .replaceWith()는 선택한 요소를 다른 것으로 바꿉니다. 문법 .replaceWith( newContent ) 예를 들어 h1 요소를 abc로 바꾸고 싶다면 다음과 같이 합니다. $( 'h1' ).replaceWith( 'abc' ); h1 요소의 내용 뿐 아니라 h1 태그까지 지우고 바꾼다는 것에 주의합니다. newContent에는 특정 요소가 들어갈 수 있습니다. 예를 들어 $( 'h1' ).replaceWith( $( 'p.a' ) ); 는 h1 요소를 클래스 값이 a인 p ...

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

jQuery / Method / .detach() - 선택한 요소를 문서에서 제거하고 저장하는 메서드

.detach() .detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나, .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다. 문법 .detach( ) 예를 들어 var jb = $( 'h1' ).detach(); 는 h1 요소를 문서에서 제거하고 변수 jb에 저장합니다. 예제 Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Selector / :button - type이 button인 요소를 선택하는 선택자

jQuery / Selector / :button - type이 button인 요소를 선택하는 선택자

:button :button은 type이 button인 요소를 선택하는 선택자입니다. 문법 $( ':button' ) type이 button인 모든 요소를 선택합니다. $( '.xy:button' ) type이 button이면서 class 값으로 xy를 갖는 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ...

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset() .offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다. 문법 1 .offset() 선택한 요소의 좌표를 가져옵니다. 예를 들어 var jb = $( 'h1' ).offset(); 는 h1 요소의 좌표를 변수 jb에 저장합니다. 문법 2 .offset( coordinates ) 선택한 요소를 특정 위치로 이동시킵니다. 예를 들어 $( 'h1' ).offset( { left: 100, top: 50 } ); 은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 ...

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

jQuery / Method / .val() - 양식(form)의 값을 가져오거나 값을 설정하는 메소드

.val() .val()은 양식(form)의 값을 가져오거나 값을 설정하는 메소드입니다. 문법 1 .val() 선택한 양식의 값을 가져옵니다. 예를 들어 var jb = $( 'input#jbInput' ).val(); 은 아이디가 jbInput인 input 요소의 값을 변수 jb에 저장합니다. 문법 2 .val( value ) 선택한 양식의 값을 설정합니다. 예를 들어 $( 'input#jbInput' ).val( 'ABCDE' ); 는 아이디가 jbInput인 input 요소의 값을 ABCDE로 정합니다. 예제 1 양식에 텍스트를 입력하고 버튼을 클릭하면, 입력한 ...

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize() .resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing ​} ); 예제 웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

jQuery / Method / .slideToggle() - 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메서드

.slideToggle() .slideToggle()은 보이지 않는 요소는 아래쪽으로 서서히 나타나게 하고, 보이는 요소는 위쪽으로 서서히 사라지게 합니다. 문법 .slideToggle( ) duration 요소가 나타나거나 사라질 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 요소가 나타나거나 사라지는 방식을 정합니다. swing과 linear가 가능하며, 기본값은 swing입니다. complete 요소가 나타나거나 ...

jQuery / Plugin / 유용한 플러그인 모음

jQuery / Plugin / 유용한 플러그인 모음

Slider bxSlider slick Uncategorized Smooth Scroll : 한 페이지에 있는 링크 사이를 부드럽게 이동하게 해주는 플러그인 jQuery Actual : 보이지 않는 요소의 크기를 가져오는 플러그인 vTicker : 아래에서 위로 스크롤되는 티커