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 / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

jQuery / Method / .delay() - 실행 중인 함수를 정해진 시간만큼 중지(연기) 시키는 메서드

.delay() .delay()는 실행 중인 함수를 정해진 시간만큼 중지(연기) 시킵니다. 문법 .delay( duration ) duration에는 중지할 시간이 들어갑니다. 숫자로 정할 때의 단위는 1/1000초이고, slow 또는 fast로 정할 수 있습니다. slow는 600, fast는 200에 해당합니다. 예제 버튼을 클릭하면 문단이 위로 사라졌다가 1초 뒤에 아래로 내려옵니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> ...

jQuery / Method / .remove() - 선택한 요소를 제거하는 메서드

jQuery / Method / .remove() - 선택한 요소를 제거하는 메서드

.remove() .remove()는 선택한 요소를 HTML 문서에서 제거합니다. 문법 .remove( ) 특정 선택자를 가진 요소를 제거할 때는 괄호 안에 선택자를 넣습니다. 예를 들어 $( 'p' ).remove( '.rm' ); 은 클래스 값으로 rm을 가진 p 요소를 제거합니다. 다음과 같이 해도 결과는 같습니다. $( 'p.rm' ).remove(); 예제 버튼을 클릭하면 rm을 클래스 값으로 가지는 h1 요소를 제거합니다. <!doctype html> <html lang="ko"> <head> ...

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

jQuery / Method / .prop() - 속성값을 가져오거나 추가하는 메서드

.prop() .prop()는 지정한 선택자를 가진 첫번째 요소의 속성값을 가져오거나 속성값을 추가합니다. 주의할 점은 HTML 입장에서의 속성(attribute)이 아닌 JavaScript 입장에서의 속성(property)이라는 것입니다. 문법 1 .prop( propertyName ) 속성값을 가져옵니다. 문법 2 .prop( propertyName, value ) 속성값을 추가합니다. 예제 1 a 요소의 href 속성값을 .attr()과 .prop()로 가져와서 출력합니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> ...

jQuery / HTML 태그 바꾸기

jQuery / HTML 태그 바꾸기

예를 들어 h2를 p로 바꾸고 싶다면 다음과 같이 합니다. $( 'h2' ).contents().unwrap().wrap( '<p></p>' ); h2 요소를 선택하고 내용으로 들어간 후 h2 태그를 없애고 p 태그로 감싼다. 새로운 태그를 붙이면서 클래스를 넣을 수도 있습니다. $( 'h2' ).contents().unwrap().wrap( '<p class="myclass"></p>' );

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

jQuery / Method / .addClass() - 클래스 값을 추가하는 메서드

.addClass() .addClass()로 선택한 요소에 클래스 값을 추가할 수 있습니다. 문법 .addClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).addClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 추가할 수 있습니다. $( 'h1' ).addClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 추가되는 것이므로, 추가되기 전의 모양에서 추가된 후의 모양으로 변하는 것을 방문자가 볼 ...

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 / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드

jQuery / Method / .removeClass() - 선택한 요소의 클래스 값을 제거하는 메서드

.removeClass() .removeClass()로 선택한 요소에서 클래스 값을 제거할 수 있습니다. 문법 .removeClass( className ) 클래스 값은 큰 따옴표 또는 작은 따옴표로 감쌉니다. $( 'h1' ).removeClass( 'abc' ); 띄어쓰기로 구분하여 여러 개의 값을 제거할 수 있습니다. $( 'h1' ).removeClass( 'ab cd ef' ); 페이지가 로드된 상태에서 클래스 값이 제거되는 것이므로, 제거되기 전의 모양에서 제거된 후의 모양으로 변하는 것을 방문자가 볼 ...

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

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

.fadeToggle() .fadeToggle()은 보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 합니다. 문법 .fadeToggle( ) duration duration에는 사라지거나 나타나는데 걸리는 시간을 넣습니다. fast, slow로 정하거나 1000분의 1초 단위의 숫자로 정합니다. fast는 200, slow는 600에 해당하고 기본값은 400입니다. 문자로 시간을 정할 때는 따옴표 안에 문자를 넣습니다. .fadeToggle( 'fast' ) 숫자로 시간을 정할 ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery / Method / jQuery.trim() - 문자열에 있는 공백(whitespace)을 제거하는 메서드

jQuery.trim() jQuery.trim()은 문자열에 있는 공백(whitespace)을 제거합니다. 주의할 점은 문자열 앞과 뒤에 있는 공백은 제거하지만, 문자열 중간에 있는 공백은 제거하지 않는다는 것입니다. 문법 jQuery.trim( str ) 예제 같은 문자열에 대하여, 두 번째 줄은 jQuery.trim()을 적용하였습니다. <!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> ...